嵌套React组件Props的TypeScript类型推断问题求助

要让TypeScript自动推断子组件的props类型并进行校验，需要将MyComponent定义为泛型组件，通过泛型关联组件类型与对应的props类型。

正确实现代码 #

import { FC, ComponentPropsWithoutRef } from 'react';

// 定义泛型组件，自动关联组件与props类型
const MyComponent = <T extends FC>({ input }: { input: [T, ComponentPropsWithoutRef<T>] }) => {
  const [Component, props] = input;
  return <Component {...props} />;
};

// 测试用子组件
interface IComponentProps {
  data: number;
}

const Component: FC<IComponentProps> = ({ data }) => {
  return <span>{data}</span>;
};

// 正确用法：无类型错误
<MyComponent input={[Component, { data: 1 }]} />

// 错误用法：TypeScript会提示“类型boolean不能赋值给类型number”
<MyComponent input={[Component, { data: true }]} />

原方案问题分析 #

你之前的实现中，TInput使用了默认泛型IDefault，TypeScript会直接使用这个默认类型而不会自动推断传入组件的实际props类型，导致类型校验失效。改为泛型组件后，TypeScript会根据传入的input数组中第一个元素（子组件）的类型，自动通过ComponentPropsWithoutRef<T>推导对应的props类型，从而实现精准的类型校验。

简化版实现（可选） #

如果不需要单独定义props接口，也可以直接在组件参数中声明泛型约束：

const MyComponent = <T extends FC>({ input }: { input: [T, ComponentPropsWithoutRef<T>] }) => {
  const [Component, props] = input;
  return <Component {...props} />;
};

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