React列表跳转商品详情页出现TypeError错误的排查与解决

以下是几个排查和修复的关键点：

1. 核对路由参数名与useParams的取值 #

首先检查你的路由配置和参数取值是否完全一致：

• 若路由定义是：

  <Route path="/catalog/:productId" element={<CarProductDetails />} />
  

  那么在详情组件中必须对应取productId：

  const { productId } = useParams();
  

• 如果路由里的参数是:id，则要取const { id } = useParams();，同时列表页的跳转链接要保持对应：/catalog/${product.id}

2. 处理参数类型不匹配问题 #

useParams()返回的所有参数都是字符串类型，如果你的carsData中商品id是数字类型，直接用===匹配会找不到数据，导致product为undefined。

修复方式：把参数转为数字后再查找：

const { productId } = useParams();
const targetId = Number(productId); // 转成数字类型
const product = carsData.find(item => item.id === targetId);

3. 增加数据不存在的兜底逻辑 #

就算参数匹配正确，也可能出现传入无效id的情况，这时候必须先判断product是否存在，再访问它的属性：

方式一：条件渲染 #

const { productId } = useParams();
const targetId = Number(productId);
const product = carsData.find(item => item.id === targetId);

if (!product) {
  return <div>该商品不存在或已下架</div>;
}

return (
  <div className="product-detail">
    <h2>{product.brand}</h2>
    {/* 其他商品信息 */}
  </div>
);

方式二：可选链操作符 #

在访问属性时使用?.避免报错，同时可以配合默认值：

<h2>{product?.brand || '未知品牌'}</h2>

4. 验证数据源正确性 #

最后确认carsData的导入和数据结构：

• 检查是否正确导入了carsData（比如有没有拼写错误）
• 打印carsData和targetId，确认数据里的id字段和你传入的参数完全匹配（比如是否是id而非_id或其他字段）

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