当返回 “undefined” 会抛出错误时，不应使用可选链（Optional Chaining）

在现代 JavaScript 开发中，Optional Chaining（?.）被视为提升代码健壮性与可读性的重要特性，它帮助开发者优雅地规避null或undefined带来的报错风险。然而，在某些关键调用场景中，看似“安全”的可选链却可能悄然引入新的运行时隐患：当代码逻辑对返回值存在强依赖时，undefined不再是一个温和的失败结果，而是导致TypeError的直接诱因。

本文将结合 SonarQube 规则 RSPEC-6523，通过真实开发场景剖析可选链的误用方式，讲解为什么“避免 null”有时反而会让系统更脆弱，并提供一套可落地的安全编码实践，帮助开发者在优雅与安全之间做出更理性的选择。

为什么这是个问题？

可选链操作符?. 允许访问深层嵌套的属性，当目标属性或其任意一层中间对象为undefined时，会返回undefined，而不会抛出错误。

这通常意味着该表达式在某些情况下预期会得到undefined。因此，如果在一个返回undefined会导致出错的上下文中使用可选链操作符，就可能引发运行时异常。

由于可选链本身就代表了多条执行分支，在这种情况下抛出的错误往往难以定位和调试。

如何修复？

为了避免运行时错误，当可选链短路（short-circuit）并返回undefined时，你应该提供一个兜底值（fallback）。

• 空值合并运算符??
  (event?.callback ?? defaultCallback)();

• 逻辑或运算符||
  (event?.callback || defaultCallback)();

• 三元运算符condition ? exprIfTrue : exprIfFalse
  (event?.callback ? event?.callback : defaultCallback)();

常见误用场景

在实际项目中，开发者经常会在必须调用函数或必须访问的对象上盲目使用可选链，从而埋下运行时异常的隐患，例如：

1. 调用可能为 undefined 的函数
   很多工程师会以为 obj?.fn() 是“安全的调用方式”，但忽略了后续逻辑对返回值的强依赖。
2. 在框架生命周期或回调函数中误用
   比如在 React、Vue 或事件系统中，某些回调本来就是“必传参数”，却使用了可选链掩盖了真正的配置错误。
3. 对异步结果滥用可选链
   请求返回的数据结构发生变化时，代码因为可选链“静默返回 undefined”，但后续代码却把它当成合法值使用，最终引发不可预测的异常。

参考文档

• MDN web docs - Optional chaining (?.)
• MDN web docs - Nullish coalescing operator (??)
• MDN web docs - Logical OR (||)
• MDN web docs - Conditional (ternary) operator