带默认值的React条件Props类型为何出现类型推断异常？

这个问题的核心在于TypeScript处理带默认值的React组件Props时，会破坏条件类型的互斥性。

咱们先结合场景拆解逻辑：
假设你的组件Props类型大致是这样的：

type ChatProps = 
  | { hideCreator?: false; createdBy: string }
  | { hideCreator: true };

为什么设默认值后推断异常？ #

当你给hideCreator设置默认值false时，React的类型系统结合TypeScript的默认参数处理逻辑，会自动对Props类型做「合并调整」：

• 原本互斥的两个条件分支，会被合并成一个包含可选hideCreator的统一类型，同时把createdBy标记为可选（因为其中一个分支没有createdBy字段）。
• 简单说，TypeScript无法识别「默认值false应该绑定到第一个条件分支」，反而把整个Props类型当成了{ hideCreator?: boolean; createdBy?: string }，自然会推断createdBy可能为undefined。

为什么未设默认值的Chat2组件正常？ #

没设默认值时，TypeScript能严格保留条件类型的互斥性：

• 当你不传hideCreator时，只能匹配第一个分支{ hideCreator?: false; createdBy: string }，所以createdBy是必填项，类型推断为string；
• 当你传hideCreator: true时，匹配第二个分支，不需要createdBy，类型检查也能正常生效。

可行的解决办法 #

如果要保留条件类型的同时设置默认值，可以换两种写法：

1. 在组件内部处理默认值，不依赖React的defaultProps或参数默认值

const Chat = (props: ChatProps) => {
  const { hideCreator = false } = props;
  // 通过类型断言修正TypeScript的错误推断
  const safeCreatedBy = ('createdBy' in props ? props.createdBy : '') as string;
  // ...组件逻辑
};

2. 用函数重载明确条件分支的类型约束

type ChatProps = 
  | { createdBy: string; hideCreator?: false }
  | { hideCreator: true };

// 用重载定义不同入参的类型规则
function Chat(props: { createdBy: string; hideCreator?: false }): JSX.Element;
function Chat(props: { hideCreator: true }): JSX.Element;
function Chat(props: ChatProps) {
  const hideCreator = props.hideCreator ?? false;
  const createdBy = 'createdBy' in props ? props.createdBy : '';
  // ...组件逻辑
}

这样既能保留条件类型的严格检查，又能实现默认值的效果。

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