TypeScript使用可选链判断可选数组长度时报对象可能未定义的原因

首先明确可选链运算符?.的运算逻辑：当?.左侧的操作数为undefined或null时，整个表达式会直接返回undefined，不会继续执行后续的属性访问。

你的props.categories?.length表达式的类型推导结果是number | undefined：

• 当props.categories存在时，返回的是number类型的数组长度
• 当props.categories为undefined时，返回的是undefined

当你直接拿这个number | undefined类型的值和0做大小比较时，TypeScript的类型校验机制不允许对可能为undefined的值执行算术比较操作，因此抛出"Object is possibly undefined"的错误。

而你原来的写法props.categories && props.categories.length > 0中，&&左侧的props.categories判断已经完成了类型收窄：只有当props.categories不为undefined/null时才会执行右侧的长度判断，此时props.categories.length的类型被确定为number，自然不会触发类型错误。

你可以选择以下任意一种写法兼容类型校验：

• 用空值合并运算符给可选链结果设置兜底默认值

if ((props.categories?.length ?? 0) > 0) {
  // 业务逻辑
}

• 直接利用真值判断简化条件（数组长度为0时为假值，和原判断逻辑完全等价）

if (props.categories?.length) {
  // 业务逻辑
}

• 保留可选链的同时提前判断非空

if (props.categories && props.categories?.length > 0) {
  // 业务逻辑
}

内容的提问来源于stack exchange，提问作者Jonathan.Brink