Strapi+Next.js构建含嵌套分类导航栏的实现方案咨询

• 首先在Strapi admin后台创建名为「导航项」的集合类型（Collection Type），字段配置如下：
  • name：字符串类型，必填，对应菜单显示文本
  • slug：UID类型，关联name字段，必填，对应路由路径参数
  • nb：整数类型，必填，用来做菜单排序（兼容你现有排序逻辑）
  • children：关系字段，选择「对多」关系，关联当前「导航项」集合，反向关系选「属于一个导航项」，命名为parent，可支持无限层级嵌套结构，完全覆盖你当前二级菜单的需求
• 数据录入：先创建6个一级导航项，找到需要配置子菜单的那个父项，在children字段中关联提前创建好的2个二级导航项即可
• 接口调用注意：请求导航数据时必须开启populate嵌套字段拉取，REST API请求示例为GET /api/navigation-items?sort[0]=nb:asc&populate=children，确保返回的一级菜单数据中携带完整的children子菜单数组

不需要将两类菜单分开单独处理，仅需要在现有map遍历逻辑中增加子菜单存在性判断即可，改造成本极低，修改后的代码如下：

<Navbar>
  <Row>
    <Navbar.Brand>
      <Link href="/actualites">
        <a className="logo"> FACT</a>
      </Link>
    </Navbar.Brand>
  </Row>
  <Navbar.Collapse id="responsive-navbar-nav">
    <ul className="menu">
      {categories.sort((a,b) => a.nb - b.nb).map((category) => {
        const hasSubMenu = category.children?.length > 0
        return (
          <li key={category.id} className={hasSubMenu ? 'has-submenu' : ''}>
            <Link as={`/category/${category.slug}`} href="/category/[id]">
              <a>{category.name}</a>
            </Link>
            {/* 存在子菜单时渲染二级列表 */}
            {hasSubMenu && (
              <ul className="submenu">
                {category.children.map(sub => (
                  <li key={sub.id}>
                    <Link as={`/category/${sub.slug}`} href="/category/[id]">
                      <a>{sub.name}</a>
                    </Link>
                  </li>
                ))}
              </ul>
            )}
          </li>
        )
      })}
    </ul>
  </Navbar.Collapse>
</Navbar>

• 后续只需要给.has-submenu、.submenu类添加对应样式，就可以实现hover/点击展开的下拉效果，如果你用的是React Bootstrap组件库，也可以把子菜单部分替换成NavDropdown组件，适配组件库的交互规范
• 这种实现方式兼容未来扩展更多子菜单、甚至三级菜单的需求，不需要重构核心渲染逻辑

内容的提问来源于stack exchange，提问作者Rom-888