Next.js 13+Strapi中Menu组件getStaticProps返回undefined问题排查

核心原因分析 #

出现dataMenu为undefined的情况，主要有以下几种可能：

1. getStaticProps的使用范围错误
   getStaticProps是Next.js Pages Router专属的静态数据获取方法，只能在pages目录下的页面组件（如pages/index.js）中使用，不能直接写在Menu、Layout这类普通组件里。Next.js只会自动执行页面组件中的getStaticProps，普通组件中的该方法不会被触发，自然无法传递数据。

2. Next.js 13 App Router与Pages Router混淆
   如果你用的是Next.js 13默认的app目录路由（App Router），getStaticProps完全不生效——App Router采用Server Component直接异步获取数据的模式，不再依赖getStaticProps这类Pages Router的API。

3. 数据传递链路断裂
   即使你在页面组件中正确使用了getStaticProps，但如果没有将获取到的dataMenu通过props逐层传递给Menu组件（页面→Layout→Menu），Menu中也拿不到数据。

针对性解决办法 #

情况1：使用Pages Router（pages目录）

1. 把getStaticProps移到pages目录的页面组件中，获取数据后通过props传给Layout：

// pages/index.js
export async function getStaticProps() {
  // 这里测试过能拿到正确JSON，保留原有逻辑
  const res = await fetch('你的Strapi菜单接口地址');
  const dataMenu = await res.json();
  return { props: { dataMenu } };
}

export default function Home({ dataMenu }) {
  // 将dataMenu传给Layout组件
  return <Layout dataMenu={dataMenu}><HomeContent /></Layout>;
}

2. 在Layout组件中接收数据并传给Menu：

// Layout.js
export default function Layout({ children, dataMenu }) {
  return (
    <div>
      {/* 把dataMenu传递给Menu组件 */}
      <Menu dataMenu={dataMenu} />
      {children}
    </div>
  );
}

3. Menu组件接收props并使用：

// Menu.js
export default function Menu({ dataMenu }) {
  console.log(dataMenu); // 现在能拿到数据了
  return <nav>{/* 渲染菜单逻辑 */}</nav>;
}

情况2：使用App Router（app目录）

直接在Menu组件（默认是Server Component）中异步获取数据即可，无需getStaticProps：

// app/components/Menu.js
async function Menu() {
  // 默认是静态缓存，和getStaticProps效果一致
  const res = await fetch('你的Strapi菜单接口地址', { cache: 'force-cache' });
  const dataMenu = await res.json();
  console.log(dataMenu);
  return <nav>{/* 渲染菜单逻辑 */}</nav>;
}

export default Menu;

然后在根布局中直接引入Menu：

// app/layout.js
import Menu from './components/Menu';

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

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