React+Sanity开发报错：无法解构null类型product的image属性

报错根源 #

报错TypeError: Cannot destructure property 'image' of 'product' as it is null的核心原因是：组件尝试解构product对象时，product的值为null。这种情况通常出现在**getStaticProps未查询到匹配slug的产品**时，比如slug输入错误、对应产品在Sanity后台被删除，或是查询语句本身存在问题。

分步解决方案 #

1. 组件层面添加防御性代码，避免直接解构null #

修改ProductDetails组件，先判断product是否存在，再进行解构和渲染：

const ProductDetails = ({ product, products }) => {
  // 若product为null/undefined，返回404提示或加载状态
  if (!product) {
    return <div className="product-not-found">产品不存在</div>;
  }

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

  return (
    <div>
      <div className="product-detail-container">
        <div>
          <div className="image-container">
            {/* 增加防御，避免image为空数组的情况 */}
            <img src={urlFor(image?.[0] || '')} />
          </div>
        </div>
      </div>
    </div>
  );
};

2. 修复getStaticProps中的查询语句（规避模板字符串风险） #

当前用模板字符串拼接slug，若slug包含特殊字符（比如单引号）会导致查询失效。改用Sanity支持的参数化查询，更安全可靠：

export const getStaticProps = async ({ params: { slug }}) => {
  // 使用参数化查询，$slug会自动处理特殊字符
  const query = `*[_type == "product" && slug.current == $slug][0]`;
  const productsQuery = '*[_type == "product"]'
  
  // 第二个参数传入查询参数
  const product = await client.fetch(query, { slug });
  const products = await client.fetch(productsQuery);

  // 如果product不存在，返回notFound: true触发Next.js的404页面
  if (!product) {
    return {
      notFound: true
    }
  }

  return {
    props: { products, product }
  }
}

3. 验证Sanity后台的产品数据 #

• 检查对应slug的产品是否在Sanity后台存在，且slug.current字段与访问路径完全匹配（注意大小写、特殊字符）
• 确认产品的image字段是否已正确上传，避免出现空值

内容的提问来源于stack exchange，提问作者32 denka