如何解决TypeScript数组场景下TS2532 Object is possibly 'undefined'报错

问题根因 #

• Company接口中的companyAdmins是可选属性，类型为CompanyAdmin[] | undefined，直接访问其索引或属性时，TS会提示可能为undefined
• 你修改后的写法存在两个核心问题：
  1. data.companyAdmins?.length > 0的判断逻辑不会触发TS的类型收窄，TS仍会认为后续访问的companyAdmins可能为undefined
  2. 非空断言!加在了不需要断言的data上，data本身是CompanyInfoProps的必选属性，不存在undefined的可能，反而companyAdmins和数组索引项才需要做安全校验
• 即使companyAdmins确定为数组类型，TS默认也不会认为[0]索引访问的项一定存在，直接访问仍会触发安全提示

解决方案 #

按推荐优先级排序：

方案1：全链路可选链（最推荐，简洁安全） #

直接用可选链覆盖所有可能为undefined的访问节点，不需要额外做长度判断：

{data.companyAdmins?.[0]?.user?.firstName}

?.可选链运算符会在任意前序节点为undefined时直接返回undefined，不会抛出运行时错误，也完全符合TS的类型校验规则。

方案2：显式类型收窄（适合需要明确分支判断的场景） #

先做显式的非空和长度判断，触发TS的类型收窄后再访问属性：

{
  data.companyAdmins && 
  data.companyAdmins.length > 0 && 
  data.companyAdmins[0].user?.firstName
}

直接对companyAdmins做非空判断后，TS会自动将其类型收窄为CompanyAdmin[]，后续访问不需要再加额外的非空断言。

方案3：非空断言（仅适合100%确认数据符合预期的场景，不推荐） #

如果业务逻辑可以保证companyAdmins一定存在且至少有1条数据，可以用非空断言跳过TS校验：

{data.companyAdmins![0].user.firstName}

注意：这种写法如果实际数据中companyAdmins为undefined或者是空数组，会直接抛出运行时错误。

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