React项目TypeError: Cannot read properties of undefined (reading 'name')问题排查

问题原因 #

你遇到的错误是因为组件渲染时product.category可能为undefined或null，直接访问其name属性会触发TypeError。而product.name等顶层字段不会报错，是因为JSX中直接渲染undefined会被处理为空内容，不会抛出错误，但嵌套属性的访问会严格检查父级是否存在。

具体场景分两种：

• 组件首次渲染时，product初始值是空对象{}，此时product.category是undefined，访问name必然报错。
• 即使接口返回了产品数据，也可能存在后端未正确关联查询分类数据，导致product.category字段缺失或为null的情况。

解决方案 #

方案1：使用可选链操作符（推荐） #

在访问嵌套属性时添加?.，当父级为undefined或null时会停止访问，避免报错：

<h4>Category: {product.category?.name}</h4>

方案2：初始化state时给category默认值 #

修改useState的初始值，提前给category一个空对象，避免首次渲染时父级不存在：

const [product, setProduct] = useState({ category: {} });

方案3：条件渲染 #

通过判断product.category是否存在，再渲染对应字段：

{product.category && <h4>Category: {product.category.name}</h4>}

方案4：检查后端接口返回 #

确认后端接口/api/v1/product/get-product/${params.slug}返回的product数据中，是否包含完整的category对象（带name字段）。如果后端未关联查询分类表，需要调整接口逻辑，确保返回包含分类信息的产品数据。

代码修改示例（方案1） #

修改后的关键代码片段：

<div className="col-2">
  <h1 className="text-center">Products Details</h1>
  <h4>Name: {product.name} </h4>
  <h4>Description: {product.description} </h4>
  <h4>Price: {product.price}</h4>
  {/* 使用可选链操作符避免报错 */}
  <h4>Category: {product.category?.name}</h4>
</div>

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