可选链操作符（?.）能精准拦截绝大多数由嵌套访问引发的“cannot read property of undefined”错误，覆盖深层属性访问、方法存在性检查及数组/动态键安全访问；但它不适用于赋值、类型错误、假值逻辑判断或异步时机问题，需配合??、条件渲染和eslint规则形成完整防护闭环。
可选链操作符（?.）不能“彻底告别”该错误，但它能**精准拦截绝大多数由嵌套访问引发的 cannot read property of undefined 运行时错误**——前提是正确理解它的能力边界，并配合其他手段补全防护。
它真正能拦住的场景
可选链只在遇到 null 或 undefined 时短路，返回 undefined 而不继续执行。这覆盖了生产中最常见的三类空值崩溃点：
-
深层对象属性访问：比如
user?.profile?.preferences?.theme，哪怕user是null，也不会报错 -
方法调用前的存在性检查：如
apiClient?.fetchData?.()，若apiClient不存在或fetchData不是函数，直接返回undefined -
数组或动态键访问：例如
list?.[0]?.id或obj?.[key]，当list或obj为空时安全跳过
它拦不住，但你必须补上的地方
可选链不是万能胶。以下情况它完全不干预，需额外处理：
-
赋值操作：
obj?.prop = value是语法错误，不能用?.做左侧保护；应先确保obj存在，再赋值 -
类型错误（TypeError）本身：如果
obj?.method()中method存在但不是函数，仍会抛TypeError；必要时加typeof obj?.method === 'function' -
非 null/undefined 的假值：如
obj = { count: 0 }，obj?.count返回0（正常），但如果你误以为“有值就代表可用”，可能埋下逻辑漏洞 -
异步时机问题：比如 DOM 元素尚未挂载，
document.getElementById('app')?.innerText返回undefined是合理结果，但你需要判断这是“数据暂无”还是“元素根本没渲染”，靠?.无法区分
搭配 ?? 才算闭环
单独用 ?. 只是把错误变成 undefined，真正健壮的写法是立刻用空值合并操作符（??）兜底：
-
const title = data?.meta?.title ?? '默认标题'—— 明确告诉程序：“空就是空，不是假值，该用默认值就用” - 避免用
||替代??：比如data?.count || 10在count为0时也会取10，而??只对null/undefined生效 - 在 React/Vue 渲染层，可结合条件渲染：
{user?.name ?? '游客'}，既防错又保体验
上线前必须做的两件事
光写对还不够，得让防护真正落地：
-
检查所有 API 响应结构：后端字段缺失、嵌套层级变动是最大隐患源；用
?.替换所有a && a.b && a.b.c模式，并基于真实响应样本验证链路完整性 -
禁用未加保护的深层访问：在 ESLint 中启用
@typescript-eslint/no-unnecessary-condition和自定义规则，禁止出现obj.a.b.c这类裸写；CI 流程中扫描并阻断
