React中如何从子组件Props中选取动态联合类型？

问题背景 #

现有子组件定义了带联合类型的Props，实现prop1和prop2的关联约束；父组件希望继承该约束，但传递属性时出现类型错误。

子组件代码 #

type SubComponentProps = {
  subText: string;
} & DynamicProps;

type DynamicProps =
  | {
      prop1?: "one" | "two";
      prop2?: "three" | "four";
    }
  | {
      prop1?: "1" | "2";
      prop2?: never;
    };

function SubComponent({ subText, prop1, prop2 }: SubComponentProps) {
  return <p>{subText}</p>;
}

父组件代码 #

type MainComponentProps = {
  mainText: string;
} & Pick<SubComponentProps, "prop1" | "prop2">;

function MainComponent({ mainText, prop1, prop2 }: MainComponentProps) {
  return (
    <div>
      <h1>{mainText}</h1>
      <SubComponent subText="Text" prop1={prop1} prop2={prop2} /> {/* 此处报错 */}
    </div>
  );
}

预期行为 #

• 当prop1传入"one"或"two"时，允许传入prop2
• 当prop1传入"1"或"2"时，禁止传入prop2

示例验证：

<MainComponent mainText="Text" prop1="one" prop2="four" />; {/* 合法 */}
<MainComponent mainText="Text" prop1="1" prop2="four" />; {/* 应报错 */}

报错信息 #

Type '{ subText: string; prop1: "one" | "two" | "1" | "2" | undefined; prop2: "three" | "four" | undefined; }' is not assignable to type 'IntrinsicAttributes & SubComponentProps'.
  Type '{ subText: string; prop1: "one" | "two" | "1" | "2" | undefined; prop2: "three" | "four" | undefined; }' is not assignable to type '{ prop1?: "1" | "2" | undefined; prop2?: undefined; }'.
    Types of property 'prop1' are incompatible.
      Type '"one" | "two" | "1" | "2" | undefined' is not assignable to type '"1" | "2" | undefined'.
        Type '"one"' is not assignable to type '"1" | "2" | undefined'.

问题原因 #

1. Pick工具类型破坏联合约束：Pick<SubComponentProps, "prop1" | "prop2">会将联合类型DynamicProps拆解为独立的属性类型，丢失prop1和prop2的关联逻辑。原本的联合分支约束被抹平，变成prop1可接收所有可选值、prop2可接收所有可选值的松散类型，导致传递给子组件时不符合联合类型的分支要求。
2. 直接复用DynamicProps的解构问题：即使父组件Props直接继承DynamicProps，如果单独解构prop1和prop2再传递，TypeScript无法推断当前属于联合类型的哪一个分支，依然会触发类型不匹配错误。

解决方案 #

方案一：剩余参数传递保留联合约束 #

通过剩余参数将动态属性打包传递，避免解构破坏分支信息：

type MainComponentProps = {
  mainText: string;
} & DynamicProps;

function MainComponent({ mainText, ...dynamicProps }: MainComponentProps) {
  return (
    <div>
      <h1>{mainText}</h1>
      <SubComponent subText="Text" {...dynamicProps} />
    </div>
  );
}

此方式保留了dynamicProps的联合类型分支信息，TypeScript能正确识别其与子组件Props的兼容性。

方案二：泛型组件精准锁定分支 #

通过泛型捕获DynamicProps的具体分支，确保属性关联始终有效：

type DynamicProps =
  | {
      prop1?: "one" | "two";
      prop2?: "three" | "four";
    }
  | {
      prop1?: "1" | "2";
      prop2?: never;
    };

// 子组件使用泛型约束Props
type SubComponentProps<T extends DynamicProps = DynamicProps> = {
  subText: string;
} & T;

function SubComponent<T extends DynamicProps>({ subText, prop1, prop2 }: SubComponentProps<T>) {
  return <p>{subText}</p>;
}

// 父组件同步泛型约束
type MainComponentProps<T extends DynamicProps = DynamicProps> = {
  mainText: string;
} & T;

function MainComponent<T extends DynamicProps>(props: MainComponentProps<T>) {
  return (
    <div>
      <h1>{props.mainText}</h1>
      <SubComponent subText="Text" {...props} />
    </div>
  );
}

泛型会锁定当前使用的DynamicProps分支，无论是父组件传入还是子组件接收，都能严格遵循prop1和prop2的关联规则。

方案三：类型断言快速兼容 #

如果场景简单，可通过类型断言告知TypeScript属性兼容性：

type MainComponentProps = {
  mainText: string;
} & DynamicProps;

function MainComponent(props: MainComponentProps) {
  return (
    <div>
      <h1>{props.mainText}</h1>
      <SubComponent subText="Text" {...props as DynamicProps} />
    </div>
  );
}

此方式适用于快速修复，但不如前两种方案严谨，仅推荐在明确类型安全的场景使用。

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