在React组件中使用条件类型时遇到TypeScript错误求助

我在React组件中使用条件类型时遇到了TypeScript错误，问题出在根据type属性渲染不同组件并传递对应props的场景。

代码示例 #

type PairingCardProps = {
  p: string;
};

type SampleCardProps = {
  s: string;
};

export const GRID_CARD_COMPONENTS = {
  pairing: ({ p }: PairingCardProps) => <div>Pairing Card</div>,
  sample: ({ s }: SampleCardProps) => <div>Sample Card</div>,
};

type TypefaceGridCardProps =
  | ({ type: "sample" } & SampleCardProps)
  | ({ type: "pairing" } & PairingCardProps);

const TypefaceGridCard = ({ type, ...props }: TypefaceGridCardProps) => {
  const Card = GRID_CARD_COMPONENTS[type as keyof typeof GRID_CARD_COMPONENTS];

  if (!Card) return null;

  return <Card {...props} />;
};

错误信息 #

Type PairingCardProps is missing the following properties from type 'SampleCardProps': s

临时解决方案 #

我通过类型断言解决了问题，但更倾向于使用对象映射的方案：

type TypefaceGridCardProps =
  | ({
      type: "pairing";
    } & PairingCardProps)
  | ({
      type: "sample";
    } & SampleCardProps);

const TypefaceGridCard = ({ type, ...props }: TypefaceGridCardProps) => {
  switch (type) {
    case "sample":
      return <SampleCard {...(props as SampleCardProps)} />;

    case "pairing":
      return <PairingCard {...(props as PairingCardProps)} />;

    default:
      throw new Error(`Unknown type: ${type}`);
  }
};

推荐的对象映射解决方案 #

问题核心是TypeScript无法自动关联type字段与对应props的类型。我们可以通过定义精确的类型约束，让TypeScript正确推导类型匹配关系：

方案一：基于组件映射定义Props类型

type PairingCardProps = {
  p: string;
};

type SampleCardProps = {
  s: string;
};

// 明确组件映射的类型，绑定key与对应props
type GridCardComponents = {
  pairing: (props: PairingCardProps) => JSX.Element;
  sample: (props: SampleCardProps) => JSX.Element;
};

export const GRID_CARD_COMPONENTS: GridCardComponents = {
  pairing: ({ p }) => <div>Pairing Card</div>,
  sample: ({ s }) => <div>Sample Card</div>,
};

// 自动生成联合类型，确保type与props匹配
type TypefaceGridCardProps = {
  [K in keyof GridCardComponents]: { type: K } & (GridCardComponents[K] extends (props: infer P) => any ? P : never);
}[keyof GridCardComponents];

const TypefaceGridCard = ({ type, ...props }: TypefaceGridCardProps) => {
  const Card = GRID_CARD_COMPONENTS[type];
  return <Card {...props as never} />;
};

方案二：泛型组件写法

通过泛型直接约束type和props的关联关系，无需额外定义联合类型：

type PairingCardProps = {
  p: string;
};

type SampleCardProps = {
  s: string;
};

export const GRID_CARD_COMPONENTS = {
  pairing: ({ p }: PairingCardProps) => <div>Pairing Card</div>,
  sample: ({ s }: SampleCardProps) => <div>Sample Card</div>,
};

const TypefaceGridCard = <K extends keyof typeof GRID_CARD_COMPONENTS>({
  type,
  ...props
}: { type: K } & Parameters<typeof GRID_CARD_COMPONENTS[K]>[0]) => {
  const Card = GRID_CARD_COMPONENTS[type];
  return <Card {...props} />;
};

这两种方案都能避免类型断言，让TypeScript自动校验type与props的匹配性，同时保留对象映射的简洁写法。

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