React.ForwardRef 丢失泛型类型的推断类型

Question

我正在使用 React，在本例中使用的是功能React.forwardRef.
我遇到的问题是，使用 后，在使用 包装的组件时React.forwardRef，我丢失了泛型类型的推断类型。TReact.forwardRef

让我用一个例子来解释一下；采取这个代码：

interface IUser {
    nickname: string;
}

interface IList<TRecord> {
    items: TRecord[];
    children: (item: TRecord) => React.ReactElement;
}

export const List = <TRecord extends unknown>(props: IList<TRecord>) => {
    return (
        <ul>
            {props.items.map(x => <li>{props.children(x)}</li>)}
        </ul>
    );
}

export const MyApp = () => {
    const items : IUser[] = [];
    return (
        <List items={items}>
            {item => <p>{item.nickname}</p>}
        </List>
    );
}

当我在of{item.nickname}内部编写时，TypeScript 可以根据传递给 的props推断出 的类型。returnMyAppitemitems<List>

现在，让我用 括List起来React.forwardRef，如下所示：

export const List = React.forwardRef(<TRecord extends unknown>(props: IList<TRecord>, ref: any) => {
    return (
        <ul>
            {props.items.map(x => <li>{props.children(x)}</li>)}
        </ul>
    );
});

这是 TypeScript 告诉我的：

如您所见，TypeScript 无法再推断item. 我认为正在发生的事情是，使用React.forwardRef，我失去了通过道具传递的通用性items..但我不知道如何解决这个问题。