TypeScript报错：forwardRef组件不存在displayName属性？

架构老林

2026-7-10

问题原因与解决方案

错误原因

TypeScript没有正确推断出forwardRef返回值的类型——forwardRef实际返回的是ForwardRefExoticComponent类型，这个类型自带displayName属性，但你的代码中TypeScript把它推断成了普通的函数组件类型（(props: LolProps & RefAttributes<unknown>) => ReactElement<any, ...> | null），而普通函数类型上不存在displayName，所以触发了TS2339错误。

解决方法

有几种可靠的修复方式：

方法1：显式指定组件类型

直接给Lol变量指定ForwardRefExoticComponent类型，明确告诉TypeScript这是一个带ref的特殊组件：

import { forwardRef, type ForwardRefExoticComponent, type RefAttributes } from 'react';

// ... 保留你的类型定义 ...

const Lol: ForwardRefExoticComponent<LolProps & RefAttributes<HTMLDivElement>> = forwardRef(function Lol({ as = 'div', ...rest }: LolProps, ref) {
  const Component = as;
  return <Component {...rest}>Something</Component>;
});
Lol.displayName = 'Something.Lol';

方法2：提取内部组件并单独设置displayName

把组件逻辑单独提取成一个具名函数，先给它设置displayName，再传给forwardRef：

import { forwardRef } from 'react';

// ... 保留你的类型定义 ...

function LolComponent({ as = 'div', ...rest }: LolProps, ref: React.Ref<HTMLDivElement>) {
  const Component = as;
  return <Component {...rest}>Something</Component>;
}
// 先给内部组件设置displayName
LolComponent.displayName = 'Something.Lol';
// 再用forwardRef包裹
const Lol = forwardRef(LolComponent);

方法3：类型断言快速修复

如果你不想调整结构，可以用类型断言让TypeScript忽略类型检查：

const Lol = forwardRef(function Lol({ as = 'div', ...rest }: LolProps, ref) {
  const Component = as;
  return <Component {...rest}>Something</Component>;
}) as typeof Lol & { displayName?: string };
Lol.displayName = 'Something.Lol';