React组件TypeScript泛型类型问题：如何定义Data兼容任意带Props组件

错误原因 #

你定义的Data类型要求每个属性值是一个通用泛型函数，它必须能接受任意类型的props（即泛型P可以是任何类型）。但实际你的aa和bb函数只接受特定的props类型（{a: number}和{b: string}），这就导致了类型不兼容——TypeScript认为你的函数无法满足“接受任意props”的要求。

解决方案 #

方案1：使用React内置组件类型（推荐）

React提供了ComponentType类型，它可以匹配任何函数组件或类组件，同时保留props的类型检查：

import React from 'react';

const A = (props: { a: number }) => <>A: {props.a}</>;
const B = (props: { b: string }) => <>B: {props.b}</>;

// 定义Data为键是字符串、值为任意React组件的类型
type Data = {
  [id: string]: React.ComponentType<any>;
};

// 直接将组件赋值给data，无需额外包裹函数
const data: Data = {
  aa: A,
  bb: B,
};

const Usage = () => (
  <>
    {data.aa({ a: 12 })}
    {data.bb({ b: 'hi' })}
  </>
);

方案2：让TypeScript自动推断类型（更精准）

如果你不需要显式定义Data类型，可以直接让TypeScript自动推断data的类型，这样既能保留props的类型提示，又避免手动定义类型的麻烦：

const A = (props: { a: number }) => <>A: {props.a}</>;
const B = (props: { b: string }) => <>B: {props.b}</>;

// 用as const让TypeScript推断出最精确的类型
const data = {
  aa: A,
  bb: B,
} as const;

// 调用时TypeScript会自动检查props是否符合对应组件的类型要求
const Usage = () => (
  <>
    {data.aa({ a: 12 })}
    {data.bb({ b: 'hi' })}
  </>
);

方案3：保留组件包裹函数的写法

如果你一定要保留包裹组件的函数写法，可以把Data的类型改为接受任意特定props的函数，而不是通用泛型函数：

type Data = {
  [id: string]: (props: any) => JSX.Element | null;
};

// 或者用unknown代替any（需要类型断言）
// type Data = {
//   [id: string]: (props: unknown) => JSX.Element | null;
// };

const data: Data = {
  aa: (props: Parameters<typeof A>[0]) => A(props),
  bb: (props: Parameters<typeof B>[0]) => B(props),
};

注意：这种写法会丢失props的类型检查，仅在特殊场景下使用。

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