reactjs - 创建 React 泛型组件时出现 TypeScript 错误的问题

最近，我在使用 React 时遇到了一些问题。当我调用我的 React 泛型组件 BaseBlock 时。

我已经提供了一个类型，但 TypeScript 报错说

预期 0 个类型参数，但得到了 1 个.ts(2558)

我想请教一下如何解决这种情况。

const items = ['test1', 'test2', 'test3'];
const renderComp = (item: any) => {
  return <div>{item}</div>
}
<BaseBlock<string> items={items}>{renderRow}</BaseBlock>
           ^
           error

这是我的 BaseBlock 组件

import React from 'react';

interface Props<T> {
  id?: string;
  items?: T[];
  children?: (item: T, index: number) => React.ReactNode;
  parentId?: string;
  contentId?: string[];
}

const BaseBlock = React.forwardRef(function BaseBlock<T>(
  { items, children }: React.PropsWithChildren<Props<T>>,
  ref: React.ForwardedRef<HTMLDivElement>
): React.ReactElement | null {
  return (
    <div data-testid="base-block" ref={ref}>
      {items && children && items.map(children)}
    </div>
  );
});

export type BaseBlockProps<T> = React.PropsWithRef<Props<T>>;

export default BaseBlock;

我给我的组件字符串类型。希望没有错误并渲染这个组件。它只是渲染了，但 TypeScript 给我报错

预期 0 个类型参数，但得到了 1 个.ts(2558)

我认为是我给我的组件传了<string> 类型，但这个组件不应该使用类型，它在这个组件上预期0个参数，所以我该怎么解决？

答案＃1

我通过@Linda Paiste 的评论解决了这个问题，并参考了这个问题。

最后，我使用了全局类型增强并解决了这个问题。

declare module 'react' {
  function forwardRef<T, P = {}>(
    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
  ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
}