TypeScript编写React HOC遇类型错误：Element无法分配给ComponentType

你遇到的错误核心是传参类型不匹配：enrich函数要求传入的是React组件类型（ComponentType<P>），但你传了<Link to="#" />——这是一个已经渲染好的React元素（Element），不是组件本身。

1. 修正调用方式 #

把传入的<Link />换成组件本身Link：

// 错误写法
enrich(<Link to="#" />);

// 正确写法
const EnrichedLink = enrich(Link);

之后你可以像使用普通组件一样用EnrichedLink：

<EnrichedLink to="/home" />

2. 完善HOC的TypeScript实现 #

为了让HOC更规范，建议添加displayName（方便React DevTools识别），并确保类型推导更严谨：

import React from 'react';
import { Link } from 'react-router-dom';

export default function enrich<P>(WrappedComponent: React.ComponentType<P>) {
  function Enrich(props: P) {
    return <WrappedComponent {...props} />;
  }

  // 设置displayName，方便调试时识别组件
  Enrich.displayName = `Enrich(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;

  return Enrich;
}

// 正确调用：传入组件类型，得到增强后的组件
const EnrichedLink = enrich(Link);

编写TypeScript HOC的核心要点 #

• 区分组件与元素：HOC的输入是组件（函数/类），不是<Component />这种渲染产物。
• 严格类型约束：用React.ComponentType<P>定义传入组件的类型，P对应组件的props类型，确保props传递时类型安全。
• 保留组件标识：设置displayName，避免React DevTools里显示一堆匿名组件。
• 完整传递props：使用{...props}把所有接收的props传递给被包装组件，避免丢失属性。

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