电商Web应用点击“立即购物”触发TypeError问题求助

问题根源 #

你碰到的TypeError: Cannot destructure property 'image' of 'product' as it is null，是因为getStaticProps返回的product为null，组件渲染时直接解构null的属性触发报错。这个错误会导致页面无法生成，自然无法执行“立即购物”按钮的逻辑。

分步解决 #

1. 组件层面增加防御性判断 #

在pages\product[slug].js里，先判断product是否存在再解构，避免直接抛出错误：

// 替换原解构代码
if (!product) {
  return <div>产品不存在或已下架</div>;
}
const { image, name, details, price } = product;
// 后续代码保持不变

如果需要更流畅的用户体验，也可以添加加载状态提示。

2. 优化getStaticProps的查询逻辑 #

原查询用字符串拼接slug存在安全风险且易出现匹配误差，改成参数化查询，并处理产品不存在的情况：

export const getStaticProps = async ({ params: { slug } }) => {
  // 使用参数化查询替代字符串拼接
  const query = `*[_type == "product" && slug.current == $slug][0]`;
  const productsQuery = '*[_type == "product"]';

  // 传入参数slug执行查询
  const product = await client.fetch(query, { slug });
  const products = await client.fetch(productsQuery);

  // 若未找到对应产品，返回notFound触发404页面
  if (!product) {
    return {
      notFound: true,
    };
  }

  return {
    props: { products, product },
  };
};

这样能确保查询准确性，同时避免将null传递给组件。

3. 修复“立即购物”按钮逻辑 #

页面正常渲染后，检查handleBuyNow的实现，确保调用逻辑正确：

const handleBuyNow = () => {
  // 先将商品加入购物车
  onAdd(product, qty);
  // 再触发购物车显示
  setShowCart(true);
};

同时确认useStateContext导出的onAdd和setShowCart功能正常——比如onAdd是否正确更新购物车数据，setShowCart是否能控制购物车的显示状态。

验证流程 #

1. 重启开发服务器，确认产品详情页可正常加载
2. 访问不存在的产品slug，检查是否返回404页面
3. 点击“立即购物”按钮，验证购物车是否正常弹出

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