React+TypeScript Discriminated Unions使用报错：条件恒为false求助

核心问题定位 #

你遇到的报错本质是判别联合的类型守卫未正确生效，TypeScript无法通过showAnnotationButton === true的判断缩小props类型范围，根源在于联合类型的定义不符合判别联合的要求。

具体解决步骤 #

1. 拆分定义两种状态的Props类型

明确区分「显示注解按钮」和「不显示注解按钮」两种场景的Props，确保判别字段showAnnotationButton是字面量类型（而非宽泛的boolean）：

// 基础通用Props（不显示注解按钮的场景）
type ChartBaseProps = {
  title: string;
  // 其他通用配置
  showAnnotationButton?: false; // 可选的false，或直接省略（默认不显示）
};

// 带注解按钮的Props（必须包含注解相关配置）
type ChartWithAnnotationProps = {
  showAnnotationButton: true; // 明确字面量true，作为判别标识
  annotationLabel: string; // 注解相关必填属性
  onAnnotationClick: () => void;
} & ChartBaseProps;

// 组件最终Props为两种类型的联合
type ChartProps = ChartBaseProps | ChartWithAnnotationProps;

2. 在组件内使用自动类型窄化

定义好联合类型后，TypeScript会自动识别showAnnotationButton的判断，无需手动类型断言：

const Chart = (props: ChartProps) => {
  return (
    <div className="chart-container">
      <h2>{props.title}</h2>
      {/* 这里TypeScript会自动窄化类型，只有showAnnotationButton为true时，注解props才会被识别为存在 */}
      {props.showAnnotationButton && (
        <button onClick={props.onAnnotationClick}>
          {props.annotationLabel}
        </button>
      )}
    </div>
  );
};

3. 排查旧代码的问题点

你之前的报错「类型false | undefined与true无交集」，通常是以下原因导致：

• 没有将showAnnotationButton定义为字面量类型（比如写成了showAnnotationButton?: boolean），TypeScript无法区分两种状态
• 注解相关Props没有和showAnnotationButton: true绑定在同一个联合分支里，导致即使判断按钮显示，TypeScript也无法确认注解Props存在
• 错误地将所有注解Props设为可选，违背了判别联合的「分支专属属性」原则

使用时的自动校验优势 #

定义完成后，组件使用时TypeScript会自动做校验：

• 当传入showAnnotationButton={true}时，必须传入annotationLabel和onAnnotationClick，否则直接报错
• 当不传showAnnotationButton或传入false时，无法传入注解相关Props，避免冗余配置

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