React+TypeScript中openModal组件参数类型不兼容问题如何解决？

错误根源 #

你调用openModal时犯了两个核心错误：

• 第一个参数传了渲染后的React元素（<ConFirmModal text="OK"/>），但函数期望的是组件本身（ConFirmModal）；
• 第二个参数直接传了Props类型，而非具体的props对象。

修正步骤 #

1. 先规范ConfirmModal的类型定义 #

给组件明确props类型，避免模糊的any：

// 定义ConfirmModal的props类型
type ConfirmModalProps = {
  text: string;
  open: boolean; // useModals会自动注入open属性，必须包含
};

const ConfirmModal = ({ text, open }: ConfirmModalProps) => {
  // 组件逻辑示例
  return open ? <div>{text}</div> : null;
};

2. 优化useModals的类型（更严谨） #

替换FunctionComponent<any>为更通用的ComponentType，同时简化类型定义：

import { atom, useRecoilState, useCallback } from 'recoil';
import { ComponentType, ComponentProps } from 'react';

type ModalItem = {
  Component: ComponentType<any>;
  props: Record<string, any>;
};

const modalsAtom = atom<ModalItem[]>({
  key: "modalsAtom",
  default: [],
});

const useModals = () => {
  const [modals, setModals] = useRecoilState(modalsAtom);

  const openModal = useCallback(
    <T extends ComponentType<any>>(
      Component: T,
      props: Omit<ComponentProps<T>, "open">
    ) => {
      setModals(prev => [
        ...prev,
        { Component, props: { ...props, open: true } },
      ]);
    },
    [setModals]
  );

  // 补充关闭模态框逻辑（完整实现需要）
  const closeModal = useCallback((index: number) => {
    setModals(prev => prev.filter((_, i) => i !== index));
  }, [setModals]);

  return { modals, openModal, closeModal };
};

3. 修正openModal的调用方式 #

直接传组件本身，再传具体的props对象：

const App = () => {
  const { openModal } = useModals();

  const onOpenModal = () => {
    // 第一个参数传组件，第二个传props对象（无需包含open）
    openModal(ConfirmModal, { text: "OK" });
  };

  return <button onClick={onOpenModal}>打开确认框</button>;
};

额外提示 #

• ComponentType<any>兼容函数组件和类组件，比FunctionComponent更灵活；
• 渲染模态框时，需要遍历modals数组动态渲染：

// 在App或专门的模态容器中渲染
{modals.map((modal, index) => (
  <modal.Component key={index} {...modal.props} />
))}

内容的提问来源于stack exchange，提问作者김정수