React TypeScript forwardRef传递动态泛型的类型错误解决

1. 类型不兼容：你在forwardRef中硬编码了any作为泛型参数，导致传入MyComponent的props被推断为PropsWithForwardRef<any, any, any>，但MyComponent要求的是带特定泛型TData, D, P的类型，两者类型不匹配。
2. 泛型作用域问题：TData, D, P仅定义在FinalComponent的函数签名上，forwardRef的内部回调不在这个泛型作用域内，所以TypeScript无法识别这些参数。

要让forwardRef的泛型与FinalComponent的泛型对齐，同时让回调能访问到泛型参数：

import { forwardRef, ReactElement } from 'react';

// 假设已定义所需类型：ElementType, TableRowTypeMap, PropsWithForwardRef, PropsWithStandardRef, ReactTableRef, ReactTableProps

const MyComponent = <TData, D extends ElementType = TableRowTypeMap['defaultComponent'], P = {}>(
  props: PropsWithForwardRef<TData, D, P>
): ReactElement | null => {
  // 组件逻辑实现
  return null;
};

// 修正后的FinalComponent
const FinalComponent = forwardRef(
  <TData, D extends ElementType = TableRowTypeMap['defaultComponent'], P = {}>(
    props: PropsWithStandardRef<TData, D, P>,
    ref: ReactTableRef<any>
  ): ReactElement | null => {
    return <MyComponent {...props} forwardedRef={ref} />;
  }
) as <TData, D extends ElementType = TableRowTypeMap['defaultComponent'], P = {}>(
  props: PropsWithStandardRef<TData, D, P> & { ref?: ReactTableRef<any> }
) => ReactElement | null;

export default FinalComponent;

核心修正说明 #

• 将泛型参数<TData, D, P>移到forwardRef的回调函数上，确保回调内部能访问到这些泛型，解决“找不到名称”的报错。
• 移除forwardRef原有的any泛型，改用回调的泛型参数，让props类型与MyComponent的要求匹配，消除类型不兼容错误。
• 通过类型断言as修正forwardRef的返回类型，让FinalComponent对外暴露的类型签名符合预期。

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