NextJS How to solve "Property ... does not exist on type 'IntrinsicAttributes & ...'-CodePudding

In my nextjs-app I have Navbar-component, where I pass the menu items as a props:

<Navbar navitems={navigationItems} />

the navigationItems is an array of objects.

then in the Navbar-component I have this:

export interface INavBarItem {
   id: string;
   text: string;
   path: {
     slug: string;
   };
}

export type INavBar = INavBarItem[];

const Navbar: React.FC<INavBar> = ({ navitems }) => { ... }

Now I get the error Type error: Type '{ navitems: any; }' is not assignable to type 'IntrinsicAttributes & INavBar'.Property 'navitems' does not exist on type 'IntrinsicAttributes & INavBar'.

what am I doing wrong here?

CodePudding user response：

This is typescript so you need to explicitly type your props.

const Navbar: React.FC<INavBar> = (navitems: INavBar ) => { ... }

const Navbar: React.FC<INavBar> = (navitems: INavBarItem[]) => {...}

I'm not sure why you are destructuring navitems in your example either.

But the error is that you can't pass an any type as props to your component.

CodePudding user response：

export interface INavBarItem {
   id: string;
   text: string;
   path: {
     slug: string;
   };
}

export type INavBar = INavBarItem[];

type Props = {
  navitems: INavBar;
}

const Navbar: React.FC<Props> = ({ navitems }) => { ... }