如何让TypeScript正确推断React模态框组件与Props的关联？

你遇到的问题本质是TypeScript无法自动关联联合类型中component和props的对应关系——当把多个组件的配置放在一起时，TS会把props推断成所有组件Props的联合类型，但渲染时它要求props必须满足当前组件的Props类型（甚至会错误地要求满足所有组件Props的交集），导致类型不兼容。

下面是两种简洁的解决思路，彻底去掉switch语句：

方案1：用区分联合类型绑定组件与Props #

先定义一个组件-Props严格配对的联合类型，让TS能识别每个分支里的对应关系：

// 引入你的组件和对应的Props类型
import SelectYearModal, { SelectYearModalProps } from './SelectYearModal';
import ModalConfirm, { ModalConfirmProps } from './ModalConfirm';

// 定义每个组件的专属配置类型，组成联合类型
type ModalConfig =
  | { component: typeof SelectYearModal; props: SelectYearModalProps }
  | { component: typeof ModalConfirm; props: ModalConfirmProps };

// 在ModalContext中使用这个类型
const ModalContext = React.createContext<{
  open: (config: ModalConfig) => void;
  close: () => void;
}>({
  open: () => {},
  close: () => {},
});

渲染时直接解构使用，TS会自动推断当前分支的Props类型：

const ModalRenderer = ({ currentModal }: { currentModal: ModalConfig | null }) => {
  if (!currentModal) return null;
  
  const Component = currentModal.component;
  // 这里TS会自动识别props和Component的匹配关系，不会报错
  return <Component {...currentModal.props} />;
};

方案2：用泛型函数实现动态类型推断 #

如果你的模态框组件可能新增，不想每次都修改联合类型，可以用泛型让TS在调用时自动推断Props类型：

// 定义Context的类型，open方法是泛型函数
type ModalContextType = {
  open: <C extends React.ComponentType<any>>(config: {
    component: C;
    props: React.ComponentProps<C>;
  }) => void;
  close: () => void;
};

const ModalContext = React.createContext<ModalContextType>({
  open: () => {},
  close: () => {},
});

调用open时，TS会根据你传入的component自动提示对应的Props：

// 调用时，传入SelectYearModal后，props会自动提示SelectYearModalProps的字段
const handleOpenYearModal = () => {
  modalContext.open({
    component: SelectYearModal,
    props: { year: 2024, onConfirm: () => {} }
  });
};

渲染时同样直接解构，泛型会保证类型匹配：

// 用状态存储当前模态框的配置
const [currentModal, setCurrentModal] = useState<{
  component: React.ComponentType<any>;
  props: Record<string, any>;
} | null>(null);

const ModalRenderer = () => {
  if (!currentModal) return null;
  
  const Component = currentModal.component;
  return <Component {...currentModal.props} />;
};

为什么之前的写法会报错？ #

当你没有绑定component和props的类型时，TS会把props推断成SelectYearModalProps | ModalConfirmProps，而渲染组件时，它要求props必须是当前组件Props的子集——但联合类型的Props无法保证满足单个组件的要求（比如SelectYearModal需要year字段，但ModalConfirmProps里没有），所以TS会错误地要求props必须是两个Props类型的交集（也就是同时满足两个组件的所有字段），自然会抛出类型不兼容的错误。

内容的提问来源于stack exchange，提问作者João Pedro