如何修复错误"类型 'ReactElement<any, any>' 缺少类型'侧边栏界面'中的以下属性：是打开，切换'？

Question

我有两个React组件，据我所知，它们的设置完全相同。第一个是导航条:

type RequireAtLeastOne<T, Keys extends keyof T = keyof T> =
Pick<T, Exclude<keyof T, Keys>> 
& {
[K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>
}[Keys]
interface NavbarInterface {
toggleSidebar: () => void,
exclude: boolean,
logoImg?: StaticImageData,
logoText?: string,
opacity: number
}
const NavBar = ({
toggleSidebar,
exclude,
logoImg,
logoText,
opacity
}: RequireAtLeastOne<NavbarInterface, 'logoImg' | 'logoText'>) => {
//code...
return (
<Nav alpha={opacity} scrolled={scrolled} exclude={exclude}>
{/* more react elements */}
</Nav>
)
}

第二个是侧边栏:

interface SidebarInterface {
exclude?: boolean,
isOpen: boolean,
toggle: () => void
}
const Sidebar = ({
exclude,
isOpen,
toggle
}): SidebarInterface => {
return (
<SidebarContainer isOpen={isOpen} onClick={toggle}>
{/* more react elements */}
</SidebarContainer>
)
}

谁能帮我弄清楚这是怎么回事?

Answer 1

您过早关闭了参数声明:

const Sidebar = ({
exclude,
isOpen,
toggle
}: SidebarInterface) => { // parentheses goes AFTER props type
return (
<SidebarContainer isOpen={isOpen} onClick={toggle}>
{/* more react elements */}
</SidebarContainer>
)
}

你

}): SidebarInterface => {

被视为返回类型。返回的元素显然与prop类型不匹配。这就是TypeScript抛出错误(不匹配的返回类型)的原因。