React电商项目产品详情页出现TypeError: Cannot read properties of undefined (reading 'name')报错求助

这个报错的核心原因是类型不匹配：你的产品数据里_id是数字类型（比如1、2），但通过路由match.params.id获取到的ID是字符串类型（比如"1"），用严格相等运算符===比较时，数字和字符串不会匹配，导致products.find()返回undefined，这时再访问product.name自然就会抛出Cannot read properties of undefined的错误。

第一步：修复匹配逻辑 #

你有两种方式修正这个类型不匹配的问题：

方式1：使用非严格相等运算符==

它会自动做类型转换，让数字和字符串能正确匹配：

const ProductDetails = ({ match }) => {
  // 用==替代===
  const product = products.find((p) => p._id == match.params.id);
  
  // 容错处理：找不到产品时显示提示
  if (!product) {
    return <div>Product not found</div>;
  }
  
  return <div>{product.name}</div>;
};

方式2：将路由参数转为数字类型

用Number()或者parseInt()把字符串ID转成数字，保持严格相等的比较逻辑：

const ProductDetails = ({ match }) => {
  // 把match.params.id转为数字
  const product = products.find((p) => p._id === Number(match.params.id));
  
  if (!product) {
    return <div>Product not found</div>;
  }
  
  return <div>{product.name}</div>;
};

第二步：添加容错处理（必做） #

即使修复了匹配逻辑，也可能出现用户手动输入不存在的ID的情况，所以一定要加product是否存在的判断，避免页面崩溃。

为什么首页能正常工作？ #

首页是直接遍历products数组，用产品本身的_id作为key，不存在类型转换的问题，所以能正常渲染所有产品。

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