问题

以下是翻译好的部分：

"Can anybody help me with this error? I followed an ecommerce example application, but at the end, I encountered an error when I clicked on "Shop Now." This is the message I received:
Server Error
TypeError: Cannot destructure property 'image' of 'product' as it is null.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages\product[slug].js (19:10) @ image

     |        ^
  20 | const [index, setIndex] = useState(0);
  21 | const { decQty, incQty, qty, onAdd, setShowCart } = useStateContext();
  22 | const handleBuyNow = () => {```"

```export const getStaticPaths = async () => {
  const query = `*[_type == "product"]{
slug{
                    current
}
}`;

  const products = await client.fetch(query);
  const paths = products.map((product) => ({
    params: {
      slug: product.slug.current,
    },
  }));
  return {
    paths,
    fallback: "blocking",
  };
};
export const getStaticProps = async ({ params: { slug } }) => {
  const query = `*[_type == "product" && slug.current == '${slug}'][0]`;
  const productsQuery = '*[_type == "product"]';

  const product = await client.fetch(query);
  const products = await client.fetch(productsQuery);

  return {
    props: { products, product },
  };
};
export default ProductDetails;
```"

"Thank you

When you click on 'Shop Now', it is supposed to open the cart directly."

<details>
<summary>英文:</summary>

Can anybody help me with this error? I followed an ecommerce example application, but at the end, I encountered an error when I clicked on &quot;Shop Now.&quot; This is the message I received:
Server Error
TypeError: Cannot destructure property &#39;image&#39; of &#39;product&#39; as it is null.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages\product\[slug].js (19:10) @ image

const { image, name, details, price } = product;
| ^
20 | const [index, setIndex] = useState(0);
21 | const { decQty, incQty, qty, onAdd, setShowCart } = useStateContext();
22 | const handleBuyNow = () => {

export const getStaticPaths = async () => {
const query = *[_type == "product"]{
slug{
current
}
};

const products = await client.fetch(query);
const paths = products.map((product) => ({
params: {
slug: product.slug.current,
},
}));
return {
paths,
fallback: "blocking",
};
};
export const getStaticProps = async ({ params: { slug } }) => {
const query = *[_type == "product" && slug.current == '${slug}'][0];
const productsQuery = '*[_type == "product"]';

const product = await client.fetch(query);
const products = await client.fetch(productsQuery);

return {
props: { products, product },
};
};
export default ProductDetails;

Thank you

When you click on 'Shop Now', it is supposed to open the cart directly.

</details>


# 答案1
**得分**: 1

不要解构你的属性，像这样：

```javascript
const { image, name, details, price } = product;

你应该像这样访问它们：

product?.image

这将帮助你避免错误，还可以有条件地检查特定属性是否存在。

const { image, name, details, price } = product;

product?.image