TSX中访问嵌套JSON对象为何移除可选链会报错？

移除可选链后报错，本质是你在尝试访问一个不存在的对象的属性，具体有几种常见情况：

• drives数组长度不足，drives[1]不存在
  如果info.data.drives数组只有1个元素（索引从0开始），那么drives[1]就是undefined。直接访问undefined.isActive会触发"Cannot read properties of undefined"的运行时错误，而可选链?.会在遇到undefined/null时直接终止访问，返回undefined，不会抛出错误，三元判断也能正常执行。

• 数据是异步加载的，渲染初期数据未就绪
  如果info是通过API请求、状态异步更新等方式获取的，组件首次渲染时info.data或者info.data.drives可能还没被赋值（比如初始值是{}或者null）。这时候drives[1]自然不存在，直接访问isActive就会报错，可选链则能优雅处理这种未加载完成的状态。

• drives[1]存在，但本身不是预期的对象类型
  比如后端返回的drives数组里，某个元素是null或者其他非对象类型（比如字符串、数字），直接访问.isActive同样会报错，而可选链会跳过后续属性访问，避免错误。

举个简单的模拟验证：

// 模拟数据：drives仅包含1个元素
const info = {
  data: {
    drives: [{ isActive: true }]
  }
};

// 移除可选链执行：info.data.drives[1].isActive
// 会触发报错：Cannot read properties of undefined (reading 'isActive')
// 使用可选链：info.data.drives[1]?.isActive 返回undefined，三元判断后className为""，渲染正常

总结：可选链的核心作用就是防止访问嵌套属性时，因中间层级不存在而抛出运行时错误，你的代码能正常运行正是靠它做了兜底处理。

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