React路由产品详情页报Cannot read properties类错误如何解决

报错根因 #

• TypeError: Cannot read properties of null (reading 'find')：用于检索产品的列表数据源初始值为null，未完成数据加载就调用数组find方法，null不存在该方法直接触发报错。
• Cannot read properties of undefined (reading 'name')：find方法未匹配到对应id的产品，返回undefined，直接读取undefined的name属性触发类型错误，绝大多数场景是路由参数id的类型和产品列表的id类型不匹配（路由参数默认是字符串，产品id通常为数字类型，直接全等匹配找不到对应项）。

修复步骤 #

1. 修正数据源初始化与检索逻辑
   将产品列表的初始值从null改为空数组[]，检索时先校验数组有效性，同时统一匹配字段的类型：

// 示例：从路由参数取id时转成数字，和产品id类型对齐
const productId = Number(useParams().id)
// 检索前先校验是否为有效数组
const thisProduct = Array.isArray(productList) ? productList.find(item => item.id === productId) : undefined

2. 新增渲染兜底逻辑
   访问产品属性前先判断产品实例是否存在，避免空值报错：

方案1：可选链快速兜底 #

直接在属性访问处加可选链操作符：

{/* 原来的写法：<h1>{thisProduct.name}</h1> */}
<h1>{thisProduct?.name}</h1>
<p>{thisProduct?.desc}</p>

方案2：条件渲染优化体验 #

判断到产品不存在时渲染缺省提示或加载状态：

if (!thisProduct) {
  return <div className="product-empty">产品加载中或不存在，请返回产品列表重试</div>
}
// 下方正常写产品详情渲染逻辑
return (
  <div className="product-detail">
    <h1>{thisProduct.name}</h1>
    {/* 其他产品信息 */}
  </div>
)

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