Headless WordPress结合React Bootstrap导航子菜单加载异常问题求助

问题核心原因 #

1. _.groupBy 方法返回值是对象结构（键为父菜单ID，值为对应子菜单的数组），不是数组，因此直接调用subItems.map必然会触发类型错误。
2. 你之前改用Object.entries(subItems).map的思路错误：当前父级下拉菜单只需要匹配当前link.id的子菜单集合，不需要遍历全量的子菜单分组，而且Object.entries返回的每一项是[父ID, 子菜单数组]的二元组，你直接取subItem.url/subItem.label当然拿不到值，同时全量遍历还会导致key重复触发警告。

修复方案 #

仅需要修改NavDropdown内部的子项遍历逻辑，直接取当前父ID对应的子菜单数组遍历即可：

import { Nav, NavDropdown } from "react-bootstrap";
import { client, MenuLocationEnum } from "client";
import _ from "lodash";

function MainNav({}): JSX.Element {
  const { menuItems } = client.useQuery();
  // 增加可选链避免数据未加载时报错
  const links = menuItems?.({
    where: { location: MenuLocationEnum.PRIMARY },
  })?.nodes ?? [];

  const subItems = _.groupBy(
    links.filter((link) => link.parentId),
    "parentId"
  );  

  return (
    <Nav>
      {links.map((link) => {
        let navItem;
        if (subItems[link.id]) {
          navItem = (
            <NavDropdown title={link.label} key={link.id}>
              {/* 仅遍历当前父ID对应的子菜单数组 */}
              {subItems[link.id].map((subItem) => (
                <NavDropdown.Item
                  href={subItem.url ?? ""}
                  key={subItem.id}
                >    
                  {subItem.label}
                </NavDropdown.Item>
              ))}
            </NavDropdown>
          );
        } else if (!link.parentId) {
          navItem = (
            <Nav.Link href={link.url ?? ""} key={link.id}>
              {link.label}
            </Nav.Link>
          );
        }
        return navItem;
      })}
    </Nav>
  );
}
export default MainNav;

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