Question

我在“输入”这个 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
  }
}

Answer 1

我认为您将 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 打字稿无法将您从中拯救出来。< /p>

Next.js 和 getStaticProps 的打字稿问题

1 个答案: