Cannot set value from getStaticPaths even though it have value - reactjs

Question

I don't know why I can log value and i saw it have value, but when I set this value to ReactNode, it don't show anything. I just follow the docs of Nextjs.
What is my problem and how can I fix it?
my file name is [productId].tsx
My code
const productDetail : NextPage<Product>= (product) => {
console.log(product)
return (
<div>
<Navbar />
<div style={{ marginTop: 200 }}>
<div className="grid wide">
<div className="row">
<div className="col l-12 c-12 m-12">
<h1 className={styles.productName}>Name:{product.productName}</h1>
</div>
</div>
...
</div>
</div>
<Footer />
</div>
);
};
export const getStaticPaths: GetStaticPaths = async () => {
const { data } = await client.query<GetProductsQuery>({
query: GetProductsDocument,
variables: {
paginationOptions:{
skip:0
}
},
});
return {
paths: data.getProducts.products!.map((product) => ({
params: { productId: `${product.id}` },
})),
fallback: "blocking",
};
};
export const getStaticProps: GetStaticProps<
{ [key: string]: any },
{ productId: string }
> = async ({ params }) => {
const data = await client.query<GetProductQuery>({
query: GetProductDocument,
variables: { productId: params?.productId },
});
return {
props:{
product:data.data.getProduct.product
}
};
};
export default productDetail;
Have a nice day!
I don't know why but i fix my error by create a Props interface
interface Props{
product:Product
}
const productDetail: NextPage<Props> = ({product}) => {
...
}