在Gatsby JS中获取WordPress子菜单的实现问题

嘿，我之前也踩过这个WordPress + Gatsby菜单嵌套的坑，太懂那种明明控制台能看到子菜单数据，却死活渲染不出来的挫败感了！咱们一步步来解决：

1. 先确认GraphQL查询是否正确获取子菜单字段 #

首先，你得确保你的查询里明确请求了子菜单的节点数据。虽然你说打印能看到数据，但有时候可能是在别的地方拿到的，而当前布局组件的查询其实没包含子菜单字段。比如正确的查询应该类似这样：

export const query = graphql`
  query LayoutMenuQuery {
    wpMenu(name: {eq: "主菜单"}) { # 替换成你的菜单名称
      menuItems {
        nodes {
          id
          label
          url
          # 关键：获取子菜单的节点列表，字段名可能因WordPress配置略有不同
          childItems {
            nodes {
              id
              label
              url
              # 如果子菜单还有下一级，继续嵌套查询
              # childItems { nodes { id label url } }
            }
          }
        }
      }
    }
  }
`;

你可以去Gatsby的GraphiQL工具（localhost:8000/___graphql）验证查询结果，确认childItems.nodes里确实有子菜单数据。

2. 用递归组件渲染嵌套菜单 #

数据拿到后，问题通常出在渲染逻辑上——因为菜单是嵌套结构，需要用递归函数来遍历渲染。在你的layouts/index.js里，添加一个递归渲染菜单的函数：

import React from "react";

const Layout = ({ data }) => {
  // 从查询结果中取出主菜单节点
  const mainMenuItems = data.wpMenu.menuItems.nodes;

  // 递归渲染菜单项的函数
  const renderMenu = (items) => {
    return items.map((item) => (
      <li key={item.id} className="menu-item">
        <a href={item.url}>{item.label}</a>
        {/* 如果当前项有子菜单，递归渲染子菜单 */}
        {item.childItems?.nodes?.length > 0 && (
          <ul className="submenu">
            {renderMenu(item.childItems.nodes)}
          </ul>
        )}
      </li>
    ));
  };

  return (
    <div className="layout">
      {/* 渲染主菜单 */}
      <nav className="main-nav">
        <ul className="main-menu">{renderMenu(mainMenuItems)}</ul>
      </nav>
      {/* 页面内容区域 */}
      <main>{/* 你的页面内容 */}</main>
    </div>
  );
};

// 你的GraphQL查询
export const query = graphql`
  query LayoutMenuQuery {
    wpMenu(name: {eq: "主菜单"}) {
      menuItems {
        nodes {
          id
          label
          url
          childItems {
            nodes {
              id
              label
              url
            }
          }
        }
      }
    }
  }
`;

export default Layout;

3. 排查可能的坑点 #

• 字段名不匹配：有些WordPress配置里，子菜单的字段可能叫children而不是childItems，一定要在GraphiQL里确认实际的字段名称。
• 可选链操作符：如果你的项目没启用ES6+的可选链（?.），可以换成条件判断：item.childItems && item.childItems.nodes && item.childItems.nodes.length > 0。
• 样式问题：子菜单可能已经渲染了，但被CSS隐藏了，可以通过浏览器开发者工具检查元素是否存在。

如果还是有问题，你可以把控制台打印的菜单数据结构贴出来，我们再针对性排查！

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