Having trouble with the implementation of getStaticProps where the result can be null or some data. The typings in getStaticProps are causing issues, even after trying conditional props. Any suggestions?
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;
}
}
// Getting a lengthy error message from "StaticProps".
// Unable to handle either "error" values or valid data.
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
}
}