Unhandled Rejection (TypeError)读取undefined的error属性报错如何解决

• 错误Cannot read properties of undefined (reading 'error')的本质是代码执行到data.error这一行时，data的值为undefined，试图读取undefined的属性会直接抛出类型错误。
• 触发data为undefined的常见场景有两个：一是getProducts接口请求成功后后端返回了空响应体，没有返回预期的对象结构；二是接口请求实际已经失败，但是代码没有添加Promise的catch捕获逻辑，错误被抛到了控制台。
• 代码缺少对接口返回值的非空校验逻辑，直接访问嵌套属性没有做兼容处理。

1. 首先添加返回值非空校验
   可以用可选链运算符简化判断，将原第42行代码修改为：

if (data?.error)

也可以用传统的逻辑与判断，兼容性更好：

if (data && data.error)

2. 补充Promise异常捕获逻辑
   在then方法后追加catch块，处理网络异常、接口报错等场景，避免未处理的拒绝报错：

.catch(err => {
  const errorMsg = err?.message || '商品列表加载失败'
  setError(errorMsg)
  console.log(errorMsg, err)
})

3. 额外优化点
   原代码第44行console.log(error)打印的是外部的error状态变量，此时setError尚未完成状态更新，打印的会是更新前的旧值，建议直接打印data.error或者catch块内的错误信息。

4. 排查接口逻辑
   确认getProducts对应的后端接口，保证请求成功时一定会返回合法的对象结构，即使是业务错误场景也需要返回带error字段的对象，不要返回空值。

修复后的完整代码示例：

const loadAllProducts = () => {
  Object(_helper_coreapicalls__WEBPACK_IMPORTED_MODULE_1__["getProducts"])()
    .then(data => {
      if (data?.error) {
        setError(data.error);
        console.log(data.error);
        return
      }
      // 此处添加正常渲染商品列表的逻辑
    })
    .catch(err => {
      const errorMsg = err?.message || '商品列表加载失败'
      setError(errorMsg)
      console.log(errorMsg, err)
    })
}

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