如何修复TypeScript中子组件‘可能为null’的Prop类型错误

问题场景 #

以下代码中，App组件通过守卫逻辑确保仅在dictionary非空时渲染ComponentA和ComponentB，但TypeScript仍认为子组件接收的dictionary可能为null，导致类型错误：

type TDictionary = {
  MAIN_TITLE: string;
  COMPONENT_A_TITLE: string;
  COMPONENT_B_TITLE: string;
} | null;

const ComponentA: React.FC<{ dictionary: TDictionary }> = React.memo(
  ({ dictionary }) => {
    return <div>{dictionary.COMPONENT_A_TITLE}</div>; // TS报错：dictionary可能为null
  }
);

const ComponentB: React.FC<{ dictionary: TDictionary }> = React.memo(
  ({ dictionary }) => {
    return <div>{dictionary.COMPONENT_B_TITLE}</div>; // TS报错：dictionary可能为null
  }
);

const App = React.memo(() => {
  const [dictionary, setDictionary] = React.useState<TDictionary>(null);

  React.useEffect(() => {
    setTimeout(() => {
      setDictionary({
        MAIN_TITLE: "Hello world",
        COMPONENT_A_TITLE: "Hello from ComponentA",
        COMPONENT_B_TITLE: "Hello from ComponentB"
      });
    }, 1000);
  }, []);

  if (!dictionary) return <div>loading...</div>;

  return (
    <div className="App">
      <h1>{dictionary.MAIN_TITLE}</h1>
      <ComponentA dictionary={dictionary} />
      <ComponentB dictionary={dictionary} />
    </div>
  );
});

可选解决方案 #

1. 传递props时使用非空断言

直接在传递dictionary时添加非空断言!，强制告诉TypeScript该值不为null：

<ComponentA dictionary={dictionary!} />
<ComponentB dictionary={dictionary!} />

注意：这种方式完全依赖开发者的逻辑正确性，TypeScript会跳过此处的类型检查，若后续逻辑变更导致dictionary可能为空，会隐藏潜在错误。

2. 拆分字典类型定义

将非空的基础字典类型和可空类型分离，子组件直接使用非空的基础类型：

// 定义核心非空字典类型
type BaseDictionary = {
  MAIN_TITLE: string;
  COMPONENT_A_TITLE: string;
  COMPONENT_B_TITLE: string;
};
// 可空类型基于基础类型扩展
type TDictionary = BaseDictionary | null;

// 子组件props使用非空的BaseDictionary
const ComponentA: React.FC<{ dictionary: BaseDictionary }> = React.memo(
  ({ dictionary }) => {
    return <div>{dictionary.COMPONENT_A_TITLE}</div>;
  }
);

const ComponentB: React.FC<{ dictionary: BaseDictionary }> = React.memo(
  ({ dictionary }) => {
    return <div>{dictionary.COMPONENT_B_TITLE}</div>;
  }
);

这种方式让类型职责更清晰，子组件无需处理空值情况，也避免了重复使用Exclude的额外步骤。

3. 自定义类型守卫强化类型窄化

通过自定义类型守卫函数，让TypeScript更精准地识别dictionary的非空状态：

// 自定义类型守卫，判断是否为非空字典
function isNonEmptyDictionary(obj: TDictionary): obj is Exclude<TDictionary, null> {
  return obj !== null;
}

// 在App组件中替换原有的空值判断
if (!isNonEmptyDictionary(dictionary)) return <div>loading...</div>;

此时TypeScript会自动将dictionary的类型窄化为非空版本，传递给子组件时不会再报错，且无需修改子组件的props类型定义。

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