TypeScript可选链结合提前返回排除null时仍报空值错误问题求解

报错原因 #

1. 判断条件逻辑错误
   可选链?.在访问到null/undefined的父级节点时会直接返回undefined。你的代码中当bar.a为null时，bar.a?.text的结果是undefined，而undefined === null的判断结果为false，这个提前返回逻辑根本不会在bar.a为null的时候触发，相当于空值排除逻辑完全没生效。
2. TypeScript类型收窄的限制
   哪怕你把判断条件改成bar.a?.text == null（用双等同时匹配null和undefined），当前版本的TypeScript也不支持通过可选链的深层判断反向收窄父级对象的类型。TS只能识别对变量本身的直接判断来收窄类型，没法通过a?.b的结果反向推导a一定非空，多层可选链a?.b?.c?.d的场景下更不会自动收窄沿途所有父节点的类型。

解决方案 #

简单单层场景 #

直接对父级对象做非空判断，TS会自动完成类型收窄：

function foo(bar: Bar) {
    if (bar.a == null) {
        return;
    }
    // 此处bar.a已被收窄为A类型，无报错
    console.log(bar.a.text);
}

多层可选链场景（a?.b?.c?.d?.text类的深层判断） #

你可以根据场景选择以下方案：

• 非空断言：如果你自己确定经过判断后沿途所有节点都非空，可以用!手动标记非空，适合临时快速处理的场景：

  if (a?.b?.c?.d?.text == null) return;
  // 手动断言所有层级非空
  console.log(a!.b!.c!.d!.text);
  

• 通用类型守卫工具函数：封装一个深层属性检查的工具函数，配合类型谓词实现自动类型收窄，适合大量同类场景复用：

  type DeepNonNullable<T> = T extends null | undefined ? never : {
      [K in keyof T]: DeepNonNullable<T[K]>
  };
  function hasDeepProperty<T, P extends string[]>(obj: T, ...path: P): obj is DeepNonNullable<T> {
      let current: any = obj;
      for (const key of path) {
          if (current == null || !Object.prototype.hasOwnProperty.call(current, key)) {
              return false;
          }
          current = current[key];
      }
      return current != null;
  }
  
  // 使用示例
  if (hasDeepProperty(bar, 'a', 'text')) {
      console.log(bar.a.text); // 自动收窄类型，无报错
  }
  

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