编译器无法处理ms/TS#30581中描述的“相关联合类型”，但是，ms/TS#47109中描述了一个建议的重构，它考虑转移到泛型。首先，我们需要一些Map类型来保存每个组件的props：

type PairingCardProps = {
  p: string;
};
type SampleCardProps = {
  s: string;
};
type TypeMap = {
  sample: SampleCardProps;
  pairing: PairingCardProps;
};

现在，让我们使用mapped type重新定义GRID_CARD_COMPONENTS，并使用TypeMap作为类型的源：

export const GRID_CARD_COMPONENTS: { [K in keyof TypeMap]: React.FC<TypeMap[K]> } = {
  pairing: ({ p }) => <div>Pairing Card</div>,
  sample: ({ s }) => <div>Sample Card</div>,
};

让我们也定义GRID_CARD_COMPONENTS的类型，这是我们以后需要的：

type GridCardComponents = typeof GRID_CARD_COMPONENTS;

我们还应该为TypefaceGridCard参数创建一个Map类型，它将接受一个选项泛型参数K，该参数扩展了TypeMap的键，默认为keyof TypeMap。此类型将返回给定K的props或所有可能props的并集：

import {ComponentProps} from 'react';
// ...
type TypefaceGridCardProps<T extends keyof TypeMap = keyof TypeMap> = {
  [K in T]: { type: K } & ComponentProps<GridCardComponents[K]>;
}[T];

让我们将我们的类型应用到TypefaceGridCard：

const TypefaceGridCard = <T extends keyof TypeMap>(props: TypefaceGridCardProps<T>) => {
  const Card = GRID_CARD_COMPONENTS[props.type];
  if (!Card) return null;
  Card(props); // no error
  
  return <Card {...props} />; // unexpected error
}

奇怪的是，当我们尝试以JSX格式调用组件时，我们会得到一个错误。我不确定确切的原因，但我认为它必须对React的内部泛型类型做一些事情，这些类型无法正确处理此类情况。
解决方法是手动键入Card为FC<TypeMap[K]>，并为props定义另一个类型为ComponentProps<typeof Card>的变量，其值为props：

const TypefaceGridCard = <T extends keyof TypeMap>(props: TypefaceGridCardProps<T>) => {
  const Card: FC<TypeMap[T]> = GRID_CARD_COMPONENTS[props.type];
  const correctlyTypedProps: ComponentProps<typeof Card> = props;
  if (!Card) return null;
  return <Card {...correctlyTypedProps} />; // no error
};

或者，你可以使用asAssert来代替创建另一个变量，但我不推荐这样做，因为它的类型安全性较差：

const TypefaceGridCard = <T extends keyof TypeMap>(props: TypefaceGridCardProps<T>) => {
  const Card: FC<TypeMap[T]> = GRID_CARD_COMPONENTS[props.type];
  if (!Card) return null;
  return <Card {...(props as ComponentProps<typeof Card>)} />; // no error
};

Link to StackBlitz

我认为这是因为typescript编译器无法在TypefaceGridCard组件中推断出Card组件。我也面临这类问题。所以这可以解为：

import React from "react";
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 as any} />;
};
export default TypefaceGridCard;