为何TypeScript中条件包裹的Object.keys().map仍提示值可能为null/undefined？

我在使用Object.keys(obj)并通过外层条件判断确保值非空后，在map方法内访问payload.section时，TypeScript始终提示错误：is possibly 'null' or 'undefined'。

我的代码如下：

interface IPayload {
    section?: {
        title?: string | null
    } | null;
}

const payload: IPayload = {
    section: null
}

if (payload && payload.section) {
    Object.keys(payload).map((key) => {
        return payload.section[key as keyof typeof payload.section];
    });
}

我认为外层的payload && payload.section已经足够确保payload和section不为null、undefined或false，但map方法内的payload.section依然触发报错，只有在返回时添加payload.section &&的内联判断才生效，对此我感到困惑，希望得到解答。

核心原因 #

TypeScript的类型窄化无法穿透到回调函数作用域中。外层if语句确实在当前作用域内窄化了payload.section的类型，但map的回调是独立作用域，TypeScript无法保证回调执行时payload.section的类型仍保持窄化后的状态（比如可能有其他代码修改该值）。

可行解决方案 #

• 局部变量存储窄化后的值
  把payload.section赋值给局部变量，TypeScript能在回调中正确识别其类型：

if (payload && payload.section) {
    const section = payload.section;
    Object.keys(payload).map((key) => {
        return section[key as keyof typeof section];
    });
}

• 非空断言操作符!
  若能确保回调执行时payload.section一定非空，可使用非空断言跳过类型检查：

if (payload && payload.section) {
    Object.keys(payload).map((key) => {
        return payload.section![key as keyof typeof payload.section];
    });
}

注意：非空断言需自行保证值的非空性，否则会引发运行时错误。

• 回调内添加类型判断
  在回调内部再次做非空判断（即你提到的内联判断），这是最安全的方式，能应对外部状态被修改的情况：

if (payload && payload.section) {
    Object.keys(payload).map((key) => {
        return payload.section?.[key as keyof typeof payload.section];
    });
}

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