AntD+TypeScript开发：JSX.Element无法赋值给ReactNode类型报错求助

使用Ant Design结合TypeScript开发项目时，出现类型错误：JSX.Element类型无法赋值给(item: unknown, index: number) => ReactNode类型。已定义DataType接口，但问题仍未解决。

报错信息：

(JSX attribute) renderItem: (item: DataType) => JSX.Element
Type '(item: DataType) => JSX.Element' is not assignable to type '(item: unknown, index: number) => ReactNode'.
  Types of parameters 'item' and 'item' are incompatible.
    Type 'unknown' is not assignable to type 'DataType'.ts(2322)
index.d.ts(34, 5): The expected type comes from property 'renderItem' which is declared here on type 'IntrinsicAttributes & ListProps<unknown> & { theme?: Theme | undefined; }'

相关代码：

import React from 'react';
import { List } from 'antd';

import { CommentListWrapper, CommentWrapper, CommentInfo } from '@styles/postDetail/postComment';

interface DataType {
  writer: string;
  content: string;
  created_at: string;
}

const CommentList = () => {
  const data = [
    {
      writer: 'writer 1',
      content: 'Ant Design, a design language for background applications, is refined by Ant UED Team',
      created_at: '2023. 1. 1',
    },
    {
      writer: 'writer 2',
      content: 'Ant Design, a design language for background applications, is refined by Ant UED Team',
      created_at: '2023. 1. 2',
    },    
  ];

  return (
    <>
      <CommentListWrapper
        itemLayout="horizontal"
        dataSource={data}
        renderItem={(item: DataType) => ( // Error in renderItem property
          <List.Item actions={[<a key="comment-edit">Modify</a>, <a key="comment-delete">Delete</a>]}>
            <CommentWrapper
              title={item.writer}
              description={
                <CommentInfo>
                  <div>{item.content}</div>
                  <div>{item.created_at}</div>
                </CommentInfo>
              }
            />
          </List.Item>
        )}
      />
    </>
  );
};

export default CommentList;

问题根源是Ant Design的List组件（即你的CommentListWrapper）默认使用unknown作为泛型类型，导致renderItem的参数item被推断为unknown，和你定义的DataType不兼容。

解决方法如下：

• 给List组件指定泛型类型：在使用CommentListWrapper时加上<DataType>，让组件明确数据源类型，renderItem的item会自动推断为DataType，无需手动标注。
• 给data变量显式指定类型：将data定义为DataType[]，强化类型约束。

修改后的代码示例：

import React from 'react';
import { List } from 'antd';

import { CommentListWrapper, CommentWrapper, CommentInfo } from '@styles/postDetail/postComment';

interface DataType {
  writer: string;
  content: string;
  created_at: string;
}

const CommentList = () => {
  // 给data显式指定类型
  const data: DataType[] = [
    {
      writer: 'writer 1',
      content: 'Ant Design, a design language for background applications, is refined by Ant UED Team',
      created_at: '2023. 1. 1',
    },
    {
      writer: 'writer 2',
      content: 'Ant Design, a design language for background applications, is refined by Ant UED Team',
      created_at: '2023. 1. 2',
    },    
  ];

  return (
    <>
      {/* 给CommentListWrapper指定泛型DataType */}
      <CommentListWrapper<DataType>
        itemLayout="horizontal"
        dataSource={data}
        // item自动推断为DataType，无需手动标注
        renderItem={(item) => (
          <List.Item actions={[<a key="comment-edit">Modify</a>, <a key="comment-delete">Delete</a>]}>
            <CommentWrapper
              title={item.writer}
              description={
                <CommentInfo>
                  <div>{item.content}</div>
                  <div>{item.created_at}</div>
                </CommentInfo>
              }
            />
          </List.Item>
        )}
      />
    </>
  );
};

export default CommentList;

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