Javascript try 获取数据以创建菜单，getStaticProps 返回未定义

getStaticProps仅适用于pages文件夹内的页面组件. 以下是这doc人所说的:

只能从page导出getStaticProps.您可以cannot从非页面文件_app、_document或_error中导出它.

要保持当前的 struct ，只需调用Menu一次，并在服务器上呈现，您可以做的就是使用getInitialProps获取_app中的菜单数据，并将其作为props 传递给Layout，然后传递给Menu，如下所示.

_app.js:

import '../styles/globals.css'
import 'bootstrap/dist/css/bootstrap.css'
import Layout from './components/Layout'
import App from "next/app";

export default function MyApp({ Component, pageProps, dataMenu }) {
  return (
    <Layout dataMenu={dataMenu}>
      <Component {...pageProps} />
    </Layout>
  )
}

MyApp.getInitialProps = async (context) => {
  const urlParamsObject = {
    nested: "",
    populate: "*",
  }
  const queryString = qs.stringify(urlParamsObject);
  const { data } = await api.get(`/menus/1${queryString ? `?${queryString}` : ""}`);
  const dataMenu = data.data;
  const pageProps = await App.getInitialProps(context);

  return { ...pageProps, dataMenu: dataMenu};
};

Layout.js:

import Menu from './Menu'
import Footer from './Footer'

export default function Layout({ children, dataMenu}) {

  return (
    <>
      <Menu dataMenu={dataMenu} />
      <main>{children}</main>
      <Footer />
    </>
  )
}

Menu.js:

const Menu = async ({ dataMenu }) => {

  console.log(dataMenu);

  const renderMenuItems = (items) => {
    return items.map((item) => (
      <li key={item.id}>
        <Link href={item.attributes.url}>
          <a>{item.attributes.title}</a>
        </Link>
        {item.attributes.children.data.length > 0 && (
          <ul>{renderMenuItems(item.attributes.children.data)}</ul>
        )}
      </li>
    ));
  };

  return (
    <nav>
      <ul>{renderMenuItems(dataMenu)}</ul>
    </nav>
  );
};

⚠️:确保从正确的位置导入所有内容.