为何React泛型Wrapper组件需重复声明泛型参数P？

核心原因是：TypeScript需要一个可动态推导的泛型变量，来关联as指定的组件类型和你传入的props类型，直接使用带默认值的WrapperProps会让类型固定死，失去校验能力。

1. 直接用WrapperProps的问题 #

当你写：

const Wrapper = ({ as: Element, ...rest }: WrapperProps) => <Element {...rest} />

这里的WrapperProps没有传入泛型参数，TypeScript会直接用它的默认值P={}，此时WrapperProps的实际类型等价于：

{ as: ComponentType<{}> | ElementType }

rest的类型被固定为空对象，这会导致：

• 像Test组件那样不传href，TypeScript不会报错（因为它认为rest不需要任何属性）
• 像Test2组件那样传无效的to属性，也不会触发类型错误
  完全失去了你想要的“强制传入组件所需属性、禁止无效属性”的校验能力。

2. 组件声明泛型P的作用 #

当你给Wrapper加上泛型<P = {}>后：

const Wrapper = <P = {}>({ as: Element, ...rest }: WrapperProps<P>) => <Element {...rest} />

这里的P是函数级别的动态泛型变量，TypeScript会在你使用Wrapper时自动完成两个关键操作：

1. 根据你传入的as属性（比如Link组件），提取它的props类型作为P的候选值
2. 校验你传入的rest props是否完全匹配P的类型

比如Test3组件中，TypeScript会自动推导：

• as={Link} → Link的props类型是{ href: string }，所以P被推导为{ href: string }
• WrapperProps<P>就变成{ as: ComponentType<{ href: string }> } & { href: string }
• 此时必须传入href，传to会被判定为无效属性，完全符合你的预期。

3. 关于默认值的疑问 #

WrapperProps的P = {}默认值，是给单独使用这个类型时用的（比如直接定义type MyProps = WrapperProps）。但当它作为组件函数的参数类型时，必须有一个来自函数的泛型变量，让TypeScript能动态推导P的具体值——否则P就会被固定为默认的空对象，无法关联as和props的类型。

Wrapper的P = {}默认值，则是为了兼容“使用原生元素且不传任何props”的场景，比如：

<Wrapper as="div" />

此时P会使用默认值空对象，WrapperProps<P>的类型完全合法。

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