如何在Nextjs中使用typescript将useState作为属性传递

wkftcu5l  于 2023-03-02  发布在  TypeScript
关注(0)|答案(1)|浏览(108)

我有一个小型的next js 13应用程序,带有typescript和app目录。它在使用npm run dev的localhost上运行良好,但当我尝试构建它npm run build时,它给我的错误如下:

info  - Linting and checking validity of types .Failed to compile.

.next/types/app/about/page.ts:5:15
Type error: Type 'typeof import("C:/Users/nextApp/app/about/page")' does not satisfy the constraint 'IEntry'.
  Types of property 'default' are incompatible.
    Type '(props: Props) => JSX.Element' is not assignable to type 'PageComponent'.
      Types of parameters 'props' and 'props' are incompatible.
        Property 'state' is missing in type 'PageProps' but required in type 'Props'.

  3 | type TEntry = typeof entry
  4 | 
> 5 | check<IEntry, TEntry>(entry)
    |               ^
  6 | 
  7 | type PageParams = Record<string, string>
  8 | interface PageProps {
info  - Linting and checking validity of types ..

代码如下:

import React from "react";
interface Props {
  state: boolean;
}
const About = (props:Props) => {
  const {state} = props;
  return (
    <div >
      <h2>
        {state ? "Contact us" : "About Us"}
      </h2>     
    </div>
  );
};
export default About;

export async function getStaticProps(){
  return {
    props:{
      state:true
    }
  }
}
nukf8bse

nukf8bse1#

在typescript的情况下,缺少getStaticProps()函数的显式返回类型。
这将为您解决该问题

import { GetStaticProps } from 'next'
export async function getStaticProps(): GetStaticProps<{ state: boolean }> {
  return {
    props: {
      state: true
    }
  }
}

相关问题