访问CommerceJS API嵌套product对象时报reading 'source'类型错误如何解决

错误原因 #

组件首次渲染时，product 是初始化的空对象{}，此时product.media为undefined，直接访问product.media.source就会触发类型错误。门店页面能正常运行是因为对应场景下渲染时product已经完成赋值，不存在初始空对象访问嵌套属性的问题。

解决方案 #

• 1. 嵌套属性访问加可选链，避免空值报错

  所有嵌套属性访问的位置都改用可选链写法，即使属性不存在也会返回undefined而非抛出错误，修改示例：

  // 原来的错误写法
  <CardMedia image={product.media.source} title={product.name}></CardMedia>
  // 修改后的写法
  <CardMedia image={product?.media?.source} title={product?.name}></CardMedia>
  

  其余位置如product.description、product.id也同步修改为product?.description、product?.id即可。

• 2. 修正findProduct的错误逻辑

  当前把setProduct写在find的遍历回调中，会导致遍历每一个商品都触发一次状态更新，应该在拿到查找结果后再统一赋值：

  const findProduct = (id) => {
    const targetProduct = products.find((product) => product.id === id);
    if (targetProduct) setProduct(targetProduct);
  };
  

• 3. 给useEffect添加依赖数组，避免无限执行

  当前useEffect没有依赖项，每次组件渲染都会重复执行，补充依赖后只会在依赖项变化时触发：

  useEffect(() => {
    // 先判断依赖存在再执行查找，避免空值报错
    if (productId && products?.length) {
      findProduct(productId);
    }
  }, [productId, products]);
  

• 4. 可选优化：增加加载状态判断

  可以在组件返回前加判断，数据未加载完成时渲染占位内容，避免页面出现空白或异常样式：

  if (!product?.id) return <div>商品信息加载中...</div>
  

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