React嵌套数组.map渲染导航菜单的key属性报错问题

问题根源分析 #

你遇到的报错有两个核心原因：

1. Fragment缺少key：渲染带子女菜单的父项时，你用<>（短语法Fragment）包裹了<li>和子菜单<div>，这个Fragment作为navMenuItems.map返回的列表项，必须添加唯一key。短语法Fragment不支持key属性，需使用完整的React.Fragment组件。
2. 子菜单map未返回元素：子菜单的map函数中，你用了花括号但未显式返回<Link>组件，导致实际渲染的是undefined数组，即便加了key也无效。

修复后的完整代码 #

import React from 'react';

const navMenuItems = [
    { name: 'Home', url: '#' },
    {
      name: 'Skincare Goal',
      url: '#',
      childMenuItems: [
        { name: 'Anti-Aging', url: '/categories/anti-aging' },
        { name: 'Wound Healing', url: '/categories/wound-healing' },
        { name: 'Acne-Fightning', url: '/categories/acne-fightning' },
        { name: 'Brightening', url: '/categories/brightening' },
        { name: 'UV Protection', url: '/categories/uv-protection' },
      ],
    },
    {
      name: 'Ingredients',
      url: '#',
      childMenuItems: [
        { name: 'AHA (All Types)', url: '/ingredients/aha' },
        { name: 'Anti-Aging', url: '/ingredients/bha' },
        { name: 'BHA (Salicylic Acid)', url: '/ingredients/anti-aging' },
        { name: 'PHA (All Types)', url: '/ingredients/pha' },
        { name: 'Niacinamide', url: '/ingredients/niacinamide' },
        { name: 'Vitamin A', url: '/ingredients/vitamin-a' },
        { name: 'Hyaluronic Acid', url: '/ingredients/hyaluronic-acid' },
        { name: 'Ceramides', url: '/ingredients/ceramides' },
        { name: 'Azelaic Acid', url: '/ingredients/azelaic-acid' },
      ],
    },
];

const Navbar = () => {
  return (
    <ul>
      {navMenuItems.map((item) => {
        const parentKey = item.name.replace(' ', '');
        if (!Array.isArray(item.childMenuItems) || !item.childMenuItems.length) {
          return (
            <li key={parentKey}>
              <Link href={item.url}>{item.name}</Link>
            </li>
          );
        } else {
          return (
            <React.Fragment key={parentKey}>
              <li>
                <Link href={item.url}>{item.name}</Link>
              </li>
              <div>
                {item.childMenuItems.map((childItem) => (
                  <Link
                    key={childItem.name.replace(' ', '')}
                    href={childItem.url}
                  >
                    {childItem.name}
                  </Link>
                ))}
              </div>
            </React.Fragment>
          );
        }
      })}
    </ul>
  );
};

export default Navbar;

关键修复点说明 #

• 给Fragment添加key：将短语法<>替换为<React.Fragment key={parentKey}>，确保navMenuItems.map返回的每个列表项都有唯一key。
• 修复子菜单map的返回逻辑：把子菜单map的花括号{}改成圆括号()，实现箭头函数的隐式返回；或者保留花括号并添加return关键字，确保<Link>组件被正确返回。
• 额外修复：原数组中"AHA (All Types"缺少闭合括号，已补充为"AHA (All Types)"，避免渲染异常。

优化建议 #

• 尽量使用稳定且唯一的标识作为key，比如后续给菜单项添加id字段，优先用item.id和childItem.id，比基于名称的替换更可靠，避免名称重复导致key冲突。
• 子菜单的<div>建议包裹在<li>内，符合HTML语义化规范（ul的直接子元素只能是li），可调整结构为：

<React.Fragment key={parentKey}>
  <li>
    <Link href={item.url}>{item.name}</Link>
    <div>
      {/* 子菜单Link */}
    </div>
  </li>
</React.Fragment>

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