类型错误：无法解构“产品”的属性“图像”，因为它为空。教程问题

Question

我正在观看有关 Sanity 的教程，代码似乎一切正常，但有一些我不明白的地方。我检查了我的代码大约六次，但我就是不明白。

这是我的代码：

import React from 'react';

import { client, urlFor } from '../../lib/client';

const ProductDetails = ({ product, products }) => {
  const { image, name, details, price } = product;

  return (
    <div>
      <div className="product-detail-container">
        <div>
          <div className="image-container">
            <img src={urlFor(image && image[0])} />
          </div>
        </div>
    </div>
    </div>
  );
};

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

我尝试了我所知道的一切，但似乎不起作用

Answer 1

正如错误指出的那样，正在作为组件的 propnull值传递。productProductDetails

也许这只是一个过渡状态。在这种情况下，您可以使用空合并运算符( ??) 来防止此错误：

const ProductDetails = ({ product, products }) => {
  const { image, name, details, price } = product ?? {}; // <-- changed here

使用这样的运算符，当productis时null，解构将不再出错，并且变量image、name等将变为undefined。