React用forwardRef包裹泛型Props组件报TS2558错误如何解决？

React.forwardRef 默认返回的组件类型不会保留原组件定义的泛型参数，导致导出后的组件丢失了泛型能力，调用时传入泛型就会触发TS2558报错。

你需要手动透传泛型参数，同时调整ref的声明位置，修改后的代码如下：

// 替换为你实际ref指向的实例类型，比如指向div就是HTMLDivElement，指向其他组件就写对应组件的实例类型
type TableWrapperRef = HTMLDivElement;

const TableWrapper = React.forwardRef(<T extends {}>(
  {
    fields,
    values,
    items,
    limit, 
    currentPage, 
    keyword, 
    showIndex, 
    className
    // *注意：请删除原来Props定义中的ref字段，ref由forwardRef作为第二个参数传入*
  }: TableWrapperProps<T>,
  ref: React.Ref<TableWrapperRef>
): JSX.Element => {

  // 原有组件逻辑保持不变，需要使用ref时直接取第二个参数即可

}) as <T extends {}>(props: TableWrapperProps<T> & { ref?: React.Ref<TableWrapperRef> }) => JSX.Element;

export default TableWrapper;

如果你使用的是TS 4.7及以上版本，可以省略类型断言，直接用更简洁的写法：

// 替换为实际ref类型
type TableWrapperRef = HTMLDivElement;

export default React.forwardRef(function TableWrapper<T extends {}>(
  props: TableWrapperProps<T>,
  ref: React.Ref<TableWrapperRef>
): JSX.Element {
  // 组件原有逻辑
})

修改完成后，你调用<TableWrapper<T> ... />时就不会再触发类型报错了。

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