How do I fix the error `Type 'ReactElement<any, any>' is missing the following prope-CodePudding

I have two React components, and as far as I can tell, they're both set up exactly the same. The first is a Navbar:

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>
    )
}

The second is a sidebar:

interface SidebarInterface {
    exclude?: boolean,
    isOpen: boolean,
    toggle: () => void
}

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

Can someone help me figure out what's going on here?

CodePudding user response：

You closed the arguments declaration too early:

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

You had

}): SidebarInterface => {

which was being treated as a return type. You're returning an element, which clearly does not match the prop types. That's why TypeScript threw an error (mismatched return type).