如何解决TypeScript中React链式HOC的Props扩展类型错误？

问题场景 #

现有一个基础React组件，Props定义如下：

type ComponentProps = {
   prop1: any,
   prop2: any
} & React.HTMLAttributes<HTMLDivElement>

const Component = ({
   prop1,
   prop2,
   ...props
}: ComponentProps) => {
   console.log(prop1, prop2)
   return (
      <div {...props}>
         {props.children}
      </div>
   )
}

需要通过两个高阶组件依次包裹，分别添加newProp1和newProp2两个新Prop，但当前写法中外层HOC的newProp1出现类型错误，仅内层newProp2正常。

错误原因 #

当前导出时手动指定了FirstHOC的泛型为ComponentProps，但SecondHOC包裹Component后返回的组件Props类型是ComponentProps & { newProp2: any }，并非单纯的ComponentProps，导致FirstHOC接收的组件类型和传入的不匹配，类型推导失败。

修正方案 #

不需要手动给HOC指定泛型参数，让TypeScript自动推导组件的Props类型即可。同时优化HOC的类型定义，确保扩展的Props能正确合并：

修正后的HOC代码

import React from 'react';

// 第一个HOC：添加newProp1
function FirstHOC<T>(Component: React.ComponentType<T>) {
  return (props: T & { newProp1: any }) => {
    return <Component {...props} />;
  };
}

// 第二个HOC：添加newProp2
function SecondHOC<T>(Component: React.ComponentType<T>) {
  return (props: T & { newProp2: any }) => {
    return <Component {...props} />;
  };
}

正确的导出方式

// 无需手动指定泛型，让TypeScript自动推导
const MyComponent = FirstHOC(SecondHOC(Component));
export default MyComponent;

使用验证

此时使用组件时，所有Props都能获得正确的类型提示，无错误：

<MyComponent
   prop1="1"
   prop2="2"
   newProp1="3"
   newProp2="4"
/>

补充说明 #

• 自动泛型推导是核心：HOC的泛型T会自动捕获传入组件的Props类型，再与新增的Prop类型交叉合并，最终导出的组件Props类型就是ComponentProps & {newProp1: any} & {newProp2: any}。
• 无需显式传递新增Prop：...props已经包含了所有传入的属性，包括新增的newProp1和newProp2，HOC内部不需要单独传递这些属性。

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