Next.js和getStaticProps的Typescript问题

我在“键入”getStaticProps的这个实现时遇到了一个问题

正如您所注意到的，结果可能返回空数据返回或其他内容

因此，由于getStaticProps中的打字，这也会变得一团糟。 我试过有条件的道具，但不适合我，有什么想法吗

type ProductType = {
     props:
         | {
             product: null;
             page: string,
             status: number
          }
        | {
            product: Product;
          }
 }



function ProductPage(props: ProductType): Children  {
  const { product, status, page } = props; // errors here
  if (!product) {
    return (
      <ErrorPage statusCode={status} page={page}  />
    )
  }

  return (
    <ProductPage { ...props } />
  )
}


export default ProductPage;



interface StaticParams extends ParsedUrlQuery {
  id: string
}

type StaticProps = {
  props: {
      product: ProductType;
    }
}
// I get a very long error message here "StaticProps".
// Its like I can't do either "error" values or valid values.
export const getStaticProps: GetStaticProps<StaticProps, StaticParams> = async (context) => {
  const params = context.params!

  const response = await fetch(`${process.env.NEXT_PUBLIC_HOST}/products/${params.id}`);
  const product = await response.json();


  if (!product || product.errors) {
    return {
      props: {
        product: null,
        page: 'error page',
        status: 404
      }
    }
  }


  return {
    props: {
      product: { ...product },
    },
    revalidate: 10
  }
}

type产品类型={
道具：
| {
产品：空；
页面：字符串，
状态：编号
}
| {
产品：产品；
}
}
功能ProductPage（道具：ProductType）：子级{
const{product，status，page}=props；//此处有错误
如果（！产品）{
返回(
)
}
返回(
)
}
导出默认产品页面；
接口StaticParams扩展了ParsedUrlQuery{
id:字符串
}
类型StaticProps={
道具：{
产品：产品类型；
}
}
//我在这里收到一条很长的错误消息“StaticProps”。
//这就像我不能做“错误”值或有效值一样。
导出常量getStaticProps:getStaticProps=async（上下文）=>{
const params=context.params！
const response=wait fetch（`process.env.NEXT_PUBLIC_HOST}/products/${params.id}`）；
const product=wait response.json（）；
如果（！product | | product.errors）{
返回{
道具：{
产品：空，
页面：“错误页面”，
现状：404
}
}
}
返回{
道具：{
产品：{…产品}，
},
重新验证日期：10
}
}

我想你把

ProductType

类型嵌套在

StaticProps

类型中，把自己弄糊涂了。正如本文所述，

StaticProps

类型的完整定义是：

type StaticProps = {
  props: {
    product: {
      props:
        | {
            product: null
            page: string
            status: number
          }
        | {
            product: Product
          }
    }
  }
}

要修复编译器错误，需要将

getStaticProps

函数中的第一个return语句更改为可分配给

StaticProps

类型：

return {
  props: {
    product: {
      props: {
        product: null,
        page: 'error page',
        status: 404,
      },
    },
  },
}

虽然这至少可以让您的代码进行编译，但我怀疑您实际上应该更改

StaticProps

类型的定义。此外，您还需要确保来自

/products/{productId}

端点的响应也符合

StaticProps

类型，以避免运行时

TypeError

的typescript无法将您从中保存