TypeScript 4.8.4中可变位置父对象的Null检查报错问题

问题原因 #

TypeScript 4.8.4对可选链表达式结合类型守卫的类型窄化逻辑存在局限。

你写的isNil(order?.uuid)条件，逻辑上能推导出：当条件为false时，order不可能是null（因为如果order是null，order?.uuid会返回undefined，isNil会返回true，进入skip分支）。但TS 4.8.4无法将这个反向推导关联到order的类型上——它没有把order?.uuid的判断结果和order本身的非空性绑定，因此在三元表达式的false分支里，依然认为order可能是null，导致访问order.uuid时报错。

这个问题在TypeScript 5.2+版本中已被修复，新版本的类型分析逻辑能正确识别可选链表达式带来的间接类型窄化。

TypeScript 4.8.4可行解决方案 #

以下是几种无需升级TS版本的修复方式：

1. 拆分条件，先判断order非空 #

把条件拆分为先检查order是否为null，再检查uuid：

import { isNil } from "lodash";

const order = ...  // { uuid: string } | null

const { data } = useOrderQuery(
  isNil(order) || isNil(order.uuid)
    ? { skip: true }
    : { variables: { uuid: order.uuid } },  // 此时TS能正确识别order非空
);

这种写法让TS能明确窄化order的类型：当条件为false时，order必然是{ uuid: string }类型。

2. 提取变量缓存uuid值 #

先把order?.uuid的结果提取为变量，通过变量的类型守卫来推导：

import { isNil } from "lodash";

const order = ...  // { uuid: string } | null
const orderUuid = order?.uuid;

const { data } = useOrderQuery(
  isNil(orderUuid)
    ? { skip: true }
    : { variables: { uuid: orderUuid } },  // orderUuid此时被窄化为string
);

这种方式避免了重复访问order，TS能直接通过isNil(orderUuid)的判断结果，将orderUuid窄化为string类型。

3. 非空断言（应急使用） #

如果你能确保逻辑上order在false分支里一定非空，可以用非空断言!强制跳过TS的空值检查：

import { isNil } from "lodash";

const order = ...  // { uuid: string } | null

const { data } = useOrderQuery(
  isNil(order?.uuid)
    ? { skip: true }
    : { variables: { uuid: order!.uuid } },
);

⚠️ 注意：非空断言会跳过TS的类型检查，如果后续逻辑变更导致order可能为null，会引发运行时错误，仅建议在逻辑绝对确定的场景下使用。

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