TypeScript+React映射Redux数组传参遇TS2739错误求助

我尝试遍历从Redux store加载的数组并将信息传递给子组件，触发了TS2739错误：

Type 'ReactElement<any, any>' is missing the following properties from type 'TaskProps': id, name, slug, status

相关代码 #

Redux Store数据结构

tasks: {
    results: [
        {
            id: number,
            name: string
        }
    ]
}

子组件TaskTableRow

interface TaskProps {id: number, name: string}

const TaskTableRow: FC<TaskProps> = ({id, name}) => {
    return(
        <tr>
            <td>{id}</td>
            <td>{name}</td>
        </tr>
    )
}
export default TaskTableRow

父组件TaskTable

interface TaskProps {id: number, name: string}

const TaskTable = () => {
    const tasks = useSelector((state: TasksState) => state.tasks)

    const content = tasks.results ?
        tasks.results.map<TaskProps>(
            item => <TaskTableRow id={item.id} name={item.name} />
        ) : []

    return (
        <tbody>
            { content }
        </tbody>    
    );
}
export default TaskTable

错误原因 #

核心问题出在map方法的泛型声明上：你给map指定的泛型是TaskProps，但map回调返回的是<TaskTableRow />这个React元素（类型为ReactElement），和你指定的TaskProps类型完全不匹配，TypeScript因此抛出类型不兼容的错误。

另外错误提示里提到的slug和status，你的TaskProps接口里并没有这两个属性，可能是旧代码缓存未更新，或者Redux store中的数据实际包含这两个字段但未在接口中声明。

解决方案 #

1. 移除多余的泛型声明（推荐）：TypeScript会自动根据回调的返回值推断类型，无需手动指定：

const content = tasks.results ?
    tasks.results.map(
        item => <TaskTableRow id={item.id} name={item.name} />
    ) : []

2. 显式指定正确的泛型类型：如果一定要手动指定，应该声明为React元素类型：

import { ReactElement } from 'react';

// ...

const content = tasks.results ?
    tasks.results.map<ReactElement>(
        item => <TaskTableRow id={item.id} name={item.name} />
    ) : []

3. 排查slug和status的问题：
   • 重启VS Code或TypeScript语言服务，清除旧代码缓存
   • 检查Redux store中tasks.results的实际数据结构，同步更新TaskProps接口或调整Redux的类型定义

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