无法调用getStaticProps：Apollo从WordPress取菜单失败

核心原因 #

你当前使用的是Next.js App Router（项目中有src/app/page.jsx），但getStaticProps是Pages Router（src/pages目录专属）的数据获取API，在App Router环境下完全不会被触发，这就是它没被调用的根本问题。

其他潜在问题 #

1. homepage.jsx中未导入client和GET_MENUS查询，运行时会直接报错
2. Apollo Client配置文件中的"use client"指令仅对客户端组件生效，服务端数据获取逻辑不应受此限制

解决方案 #

方案一：改用App Router原生数据获取方式（推荐） #

App Router中服务端组件默认支持async/await直接在组件内部获取数据，无需额外API：

1. 修改src/app/page.jsx：

import Navbar from '@/components/Navbar/Navbar';
import { client } from '@/apollo/client';
// 请替换为你实际的GET_MENUS查询导入路径
import { GET_MENUS } from '@/graphql/queries';

// App Router服务端组件支持async写法
const Home = async () => {
  const apolloClient = client();
  const { data } = await apolloClient.query({
    query: GET_MENUS,
  });
  const menuItems = data?.headerMenus?.nodes ?? [];

  return (
    <>
      <Navbar menuItems={menuItems} />
    </>
  );
};

export default Home;

2. 简化src/pages/homepage/homepage.jsx（如果仅作包裹用，可直接删除该文件）：

import Navbar from '@/components/Navbar/Navbar';

const HomePage = ({ menuItems }) => {
  return (
    <>
      <Navbar menuItems={menuItems} />
    </>
  );
};

export default HomePage;

3. 确保Apollo Client在根布局中全局引入（src/app/layout.jsx）：

import ApolloWrapper from '@/apollo/client';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <ApolloWrapper>{children}</ApolloWrapper>
      </body>
    </html>
  );
}

方案二：切换回Pages Router #

如果你坚持使用getStaticProps，需要调整项目结构适配Pages Router：

• 删除src/app目录
• 将src/pages/homepage/homepage.jsx重命名为src/pages/index.jsx（作为首页入口）
• 确保Next.js配置未强制启用App Router

额外优化点 #

• 完善Navbar.jsx中的菜单渲染逻辑，当前map函数为空：

{menuItems?.map(menu => (
  <a key={menu.id} href={menu.url} className="menu-item">
    {menu.label}
  </a>
))}

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