打字稿和反应 - 对象可能是“空”

Question

所以我在具有这种类型的反应组件中使用的打字稿中的对象：

export type DataInfoTypes<dataType> = {
  data: dataType | null;
  loading: boolean;
  error: boolean;
};

让我们假设“dataType”会有（应该无关紧要，只是一个字符串对象）：

{[key in string]: string}

然后当我在 React 组件中使用这些数据时，我检查 object.data 是否不为 null：

if (!materials.data || materials.loading) {
  return <DataLoading />;
}

然后在我的返回函数中，当我引用数据时似乎没问题：

<Flex alignItems="center" direction="column">
  <Text>{materials.data["somekey"]}</Text>
  <VStack w="100%" ....

然而几行我有一个数组映射方法（在同一个组件中，相同的回报）：

<VStack w="100%" align="center">
  {sources.map((matKey: string, index: number) => {
    return <Text key={index}>{materials.data["somekey"]}</Text>
  }
</VStack>

我得到这个错误：

对象可能为“空”。 TS2531

关于如何解决这个问题或原因是什么的任何想法？ （如果可能，请排除所有 tsignore 解决方案）
非常感谢大家的回应。

Answer 1

声明的data类型是dataType或null 。 ts 编译器告诉您的是，您正在尝试访问可能为null值的属性 ( .someKey )，这将导致运行时错误。

要修复它，请使用可选链接：

materials.data?.somekey

这将返回的值data.somekey时data不null和undefined当data为null 。

最重要的是，当data为假时，可选链不会引发运行时错误。