React+TypeScript 提前判空后 map 内访问数据仍报 TS2531 空值错误如何解决

错误成因 #

这是TypeScript控制流分析的固有局限性导致的：TS的类型收窄逻辑无法穿透普通回调函数生效。你在组件顶层做的materials.data非空判断，仅能收窄顶层代码执行上下文的类型，而TypeScript默认认为Array.map的回调函数属于延迟执行的逻辑，无法保证回调执行时materials.data仍保持非空状态（比如可能存在其他异步逻辑修改materials.data的值），因此不会保留之前的非空收窄结果，抛出TS2531错误。

修复方案 #

方案1（最推荐）：提取非空值到局部常量 #

在顶层非空判断之后，将materials.data赋值给不可变的局部常量，局部常量不存在被修改的可能，TypeScript可以安全识别其非空类型：

if (!materials.data || materials.loading) {
  return <DataLoading />;
}
// 提取为不可变局部常量
const data = materials.data;

// 后续所有场景直接使用data访问
<VStack w="100%" align="center">
  {sources.map((matKey: string, index: number) => {
    return <Text key={index}>{data["somekey"]}</Text>
  })}
</VStack>

该方案无额外运行时开销，逻辑清晰可维护，是最佳实践。

方案2：使用非空断言 #

如果可以100%确保回调执行时materials.data一定非空，可以直接用非空断言操作符!手动告知TypeScript该值不可能为空：

{sources.map((matKey: string, index: number) => {
  return <Text key={index}>{materials.data!["somekey"]}</Text>
})}

该方案改动量最小，适合逻辑简单、确定不会出现空值的场景。

方案3：回调内新增类型收窄 #

如果存在materials.data被异步修改的可能性，可以在回调内部新增非空判断，符合TypeScript的类型检查规则：

{sources.map((matKey: string, index: number) => {
  if (!materials.data) return null;
  return <Text key={index}>{materials.data["somekey"]}</Text>
})}

内容的提问来源于stack exchange，提问作者Andrej Germić