React组件中默认值与联合类型的工作机制及相关类型问题

一、为何为prop设置默认值会破坏类型判断条件？ #

这本质是TypeScript对可选属性与默认值的类型推断逻辑问题：

• 如果你在Props接口里把带默认值的prop标记为可选（比如prop?: string），TypeScript会认为该prop的类型是string | undefined，哪怕你设置了默认值。这时候你做类型判断（比如if (prop)），TypeScript不会自动把它窄化为string，因为它还保留了undefined的类型可能性，导致后续的类型校验异常。
• 另外，旧写法defaultProps本身和TypeScript的类型兼容性就有问题，React官方现在也不推荐用这个方式设置默认值。

解决办法：

• 把带默认值的prop在Props接口里设为必填，然后在函数参数里直接设置默认值。这样TypeScript会自动推断组件内部该prop的类型为必填类型，不会混入undefined，类型判断就能正常工作：

interface CardProps {
  title: string; // 不要加?标记为可选
}

const Card = ({ title = "默认标题" }: CardProps) => {
  // 这里title的类型是string，类型判断完全正常
  return <h1>{title.toUpperCase()}</h1>;
};

• 如果确实需要把prop设为可选，那可以在组件内部用空值合并运算符明确类型，比如：const safeTitle = title ?? "默认标题";，这样safeTitle的类型会被推断为string。

二、为何children作为prop传递时类型校验正常，但调用时无法识别正确类型？ #

核心原因是React默认的React.ReactNode类型覆盖了你自定义的children函数类型：

• 当你在Props里定义children为特定的函数类型（比如(data: User) => React.ReactNode），传递不符合的children时TypeScript会报错，这是因为组件的Props类型在做校验。但到了组件内部，如果你没有明确约束children的类型，TypeScript会 fallback 到React内置的React.ReactNode（它包含了函数、元素、字符串等多种类型），导致调用children时无法识别你定义的参数类型。
• 另外，如果你用了PropsWithChildren包裹自定义Props，它会自动把children设为React.ReactNode，覆盖你自己定义的类型。

解决办法：

• 直接在Props里明确children的函数类型，不要依赖默认的React.ReactNode：

interface UserListProps {
  children: (user: { name: string; id: number }) => React.ReactNode;
}

const UserList = ({ children }: UserListProps) => {
  const users = [{ name: "张三", id: 1 }, { name: "李四", id: 2 }];
  return (
    <div>
      {users.map(user => children(user))}
      {/* 这里调用children时，TypeScript会自动提示参数的类型 */}
    </div>
  );
};

• 如果需要兼容普通子节点和函数子节点，用联合类型定义children，然后在调用前加类型守卫判断：

interface CardProps {
  children: React.ReactNode | ((data: { isActive: boolean }) => React.ReactNode);
}

const Card = ({ children }: CardProps) => {
  const isActive = true;
  return (
    <div>
      {typeof children === "function" ? children({ isActive }) : children}
    </div>
  );
};

• 避免用PropsWithChildren包裹你的自定义Props，除非你确实需要保留默认的children类型范围。

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