扩展WordPress REST API展示菜单项slug，解决React前端菜单链接问题

我之前做过React+WordPress的项目，刚好碰到过这个问题，给你分享下具体的解决步骤：

1. 在WordPress主题中添加API扩展代码 #

你需要在WordPress当前启用主题的functions.php文件中加入以下代码，它会通过过滤器拦截菜单的REST响应，把对应内容的slug追加到返回数据里：

// 为REST API返回的菜单项添加slug字段
function add_menu_item_slug_to_rest_response( $response, $menu_item, $request ) {
    // 仅处理关联了页面/文章的菜单项
    if ( ! empty( $menu_item->object_id ) && ! empty( $menu_item->object ) ) {
        $target_post = get_post( $menu_item->object_id );
        if ( $target_post ) {
            // 将slug添加到响应数据中
            $response->data['slug'] = $target_post->post_name;
        }
    }
    return $response;
}
add_filter( 'rest_prepare_nav_menu_item', 'add_menu_item_slug_to_rest_response', 10, 3 );

这段代码的核心是利用rest_prepare_nav_menu_item这个过滤器，在菜单项返回给前端前，通过get_post()获取对应内容的详情，然后把slug（也就是post_name）添加到响应数据里。

2. 在React中利用slug构建正确链接 #

当你通过WP REST API拉取到菜单数据后，就可以直接用返回的slug字段来生成前端路由链接了。举个简单的示例：

// 假设menuItems是从API接口获取的菜单数组
const NavigationMenu = ({ menuItems }) => {
  return (
    <nav className="site-nav">
      <ul>
        {menuItems.map(item => (
          <li key={item.id}>
            {/* 根据你的React路由规则构建链接，这里示例是/[slug] */}
            <a href={`/${item.slug}`}>{item.title.rendered}</a>
          </li>
        ))}
      </ul>
    </nav>
  );
};

额外提示 #

• 如果菜单项是自定义链接（没有关联WP的页面/文章），直接用API返回的url字段即可，不用处理slug；
• 这段代码对自定义文章类型也同样有效，get_post()会自动识别对应的内容类型并返回正确的slug；
• 如果你担心主题更新会覆盖functions.php的代码，建议把这段代码放到自定义插件里，这样更安全。

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