Next.js遍历Object.entries时链接列表不显示问题

架构老林

2026-7-13

分栏式侧边导航链接列表无法渲染的解决方案

问题现象：开发分栏式侧边导航菜单时，每个栏目包含标题与链接数组，使用Object.entries遍历数据后，栏目标题正常显示，但链接列表完全无法渲染。

问题原因

你的代码中linkList.map的回调函数使用大括号包裹代码逻辑，但没有显式返回JSX元素。箭头函数里，大括号代表函数体，若要返回内容必须手动写return；如果省略大括号，或者用小括号包裹JSX，箭头函数会自动返回表达式结果。

修正后的代码

export default function AdminSideNav() {
  return (
    <div className={`${styles.admin_sidenav}`}>
      {Object.entries(sidenav).map(([sectionTitle, linkList]) => (
        <div key={sectionTitle}>
          <h4 className={`${styles.section_title}`}>
            {sectionTitle}
          </h4>
          {/* 方式1：用小括号让箭头函数自动返回JSX */}
          {linkList.map((section, idx) => (
            <p key={idx} className={`${styles.section_name}`}>
              {section.name}
            </p>
          ))}
          
          {/* 方式2：显式使用return语句 */}
          {/* {linkList.map((section, idx) => {
            return (
              <p key={idx} className={`${styles.section_name}`}>
                {section.name}
              </p>
            );
          })} */}
        </div>
      ))}
    </div>
  );
}