Next.js+TypeScript中映射对象数组报错及无内容问题求助

问题背景 #

在Next.js的TypeScript项目中，尝试通过对象数组映射渲染SmallFolder组件时，遇到Type 'void[]' is not assignable to type 'ReactNode'错误；添加React Fragment后错误消失，但页面仍无内容。单独使用SmallFolder组件可正常显示。

相关代码 #

Folders组件原代码 #

const Folders: FC = () => {
  return (
    <section className="body-center shadow-md rounded-sm flex py-4 gap-[14px] flex-wrap my-5 relative z-[1] bg-gradien-catalog">
    <div>
       {itemCatalog.map((item)=>{
        <SmallFolder name={item.name}/>
      })}
    </div>
    </section>
  );
};

export default Folders

SmallFolder组件代码 #

interface iFolder{
  name: string
}

const SmallFolder: FC<iFolder> = ({name}) => {
  return (
    <Link
      href="/catalog"
      className="folder-container-style group grow-0 shrink flex-[278px]"
      style={{
        backgroundImage: `url("https://img.freepik.com/free-photo/flat-lay-health-still-life-arrangement-with-copy-space_23-2148854064.jpg?w=2000")`,
      }}
    >
      <p className="folder-title">{name}</p>
  
      <figcaption
        className="absolute left-0 bottom-0 flex items-end justify-center pb-5 bg-[#16406a6b] h-[40%] w-full translate-y-full
                             group-hover:translate-y-0 transition-transform"
      ></figcaption>
    </Link>
  );
};

export default SmallFolder;

数据定义 #

import { TypesItem } from "@/Types/common-types";

export const itemCatalog: TypesItem[] = [
  {
    name: "Ортопедия",
    link: "orthopedics",
  },
  {
    name: "Аппликаторы и массажные коврики",
    link: "matsAndAplicators ",
  },
  {
    name: "Расспродажа",
    link: "sales ",
  },
];

添加Fragment后的代码 #

<>
   {itemCatalog.map((item)=>{
    <SmallFolder name={item.name}/>
  })}
</>

错误信息 #

Type 'void[]' is not assignable to type 'ReactNode'.
  Type 'void[]' is not assignable to type 'ReactFragment'.
    The types returned by '[Symbol.iterator]().next(...)' are incompatible between these types.
      Type 'IteratorResult<void, any>' is not assignable to type 'IteratorResult<ReactNode, any>'.
        Type 'IteratorYieldResult<void>' is not assignable to type 'IteratorResult<ReactNode, any>'.
          Type 'IteratorYieldResult<void>' is not assignable to type 'IteratorYieldResult<ReactNode>'.
            Type 'void' is not assignable to type 'ReactNode'.ts(2322)
index.d.ts(1376, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

问题原因及解决办法 #

核心问题：map回调未返回组件 #

你的map回调函数使用了大括号{}，但没有显式返回SmallFolder组件，导致map返回的是void[]（空数组，因为每个回调都没有返回值），这不符合React对ReactNode类型的要求。

解决方式二选一： #

1. 显式添加return：

{itemCatalog.map((item)=>{
  return <SmallFolder name={item.name} key={item.link} />
})}

2. 改用小括号代替大括号：
   箭头函数中使用小括号会自动返回内部表达式的结果：

{itemCatalog.map((item)=>(
  <SmallFolder name={item.name} key={item.link} />
))}

额外注意：必须添加key属性 #

React要求列表渲染的每个元素都要有唯一的key属性，这里可以用数组中每个item的link字段（注意去掉末尾空格，保持唯一性），避免React渲染警告。

修改后的完整Folders组件示例：

const Folders: FC = () => {
  return (
    <section className="body-center shadow-md rounded-sm flex py-4 gap-[14px] flex-wrap my-5 relative z-[1] bg-gradien-catalog">
      <div>
        {itemCatalog.map((item)=>(
          <SmallFolder name={item.name} key={item.link.trim()} />
        ))}
      </div>
    </section>
  );
};

export default Folders

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