React Admin自定义列表迭代器遇TypeScript错误求助

错误核心原因：React组件必须返回单个JSX元素（或React.Fragment），你的ChallengesListContent直接返回了元素数组，不符合TypeScript对React组件返回类型的校验规则。

修改方案 #

将map生成的元素数组包裹在根容器中（推荐用React.Fragment简写<>，避免多余DOM节点），同时修正组件返回类型为JSX.Element，另外添加可选链处理数据未加载的情况：

import {List, TopToolbar, CreateButton, useListContext} from 'react-admin';
import {Challenge} from "../types";
import {Typography} from "@mui/material";

const ListActions = () => (
    <TopToolbar>
        <CreateButton />
    </TopToolbar>
);

// 修正返回类型并包裹元素数组
const ChallengesListContent = (): JSX.Element => {
    const {
        data: challenges
    } = useListContext<Challenge>()

    return (
        <>
            {/* 用可选链避免数据未加载时的报错 */}
            {challenges?.map(challenge => (
               <Typography key={challenge.id}>
                   <span>{challenge.title}</span>
               </Typography>
            ))}
        </>
    );
}

const ChallengesList = () => {
    return (
        <List actions={<ListActions/>}>
            <ChallengesListContent />
        </List>
    )
}

export default ChallengesList;

关键修改点 #

1. 用<>（React.Fragment）包裹map结果，让组件返回单个根元素
2. 将组件返回类型从JSX.Element[]改为JSX.Element
3. 添加challenges?.map可选链，避免数据加载完成前data为undefined导致的报错

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