'Property does not exist on type even though type is declared when typing NextPage

The props are passed to the component from getServerSideProps function. I have defined the type of the props and assigned to the prop that is passed to the component. But it still shows prop as any.

Code:

type BookProps = {
  _id: string;
  name: string;
  slug: string;
  author: string;
  img: string;
  createdAt: string;
  updatedAt: string;
  __v: number;
};

type BooksProps = BookProps[];

const Home: NextPage = ({ books }: BooksProps) => {
  return (
    <div>
      <Head>
        <title>The Stobook</title>
        <meta
          name="description"
          content="stobook is a free app that allows the user to read any book for free"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div style={{ display: "flex" }}>
        <NavContainer />
        <MainContainer books={books} />
      </div>
    </div>
  );
};

export default Home;

export async function getServerSideProps() {
  await dbConnect();

  const resp = await Book.find({});
  const books = JSON.parse(JSON.stringify(resp));
  return {
    props: {
      books,
    },
  };
}

Error while hovering the prop passed:

Property 'books' does not exist on type 'BooksProps'.

Error while hovering the component name:

Type '({ books }: BooksProps) => JSX.Element' is not assignable to type 'NextPage<{}, {}>'.
  Type '({ books }: BooksProps) => JSX.Element' is not assignable to type 'FunctionComponent<{}> & { getInitialProps?(context: NextPageContext): {} | Promise<{}>; }'.
    Type '({ books }: BooksProps) => JSX.Element' is not assignable to type 'FunctionComponent<{}>'.
      Types of parameters '__0' and 'props' are incompatible.
        Type '{ children?: ReactNode; }' is missing the following properties from type 'BookProps[]': length, pop, push, concat, and 29 more.

typescript next.js

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Property does not exist on type even though type is declared when typing NextPage

Sources

Related Questions