页面加载时getStaticProps未调用问题求助

核心问题：路由体系不兼容 #

getStaticProps 是 Next.js 专属的数据获取函数，仅在 Next.js 的文件系统路由（比如 pages/[id].js）机制下生效。而你当前使用的是 React Router（react-router-dom 的 <Routes>/<Route>），这套客户端路由系统完全不识别 Next.js 的 getStaticProps、getServerSideProps 这类方法，自然不会触发它。

解决方向 #

方案1：继续使用 React Router，调整数据获取逻辑

把数据获取逻辑移到组件内部，用 React 的 useEffect 或 React 18+ 的 use 钩子实现异步数据获取，示例代码：

import { useParams } from 'react-router-dom';
import { withSSRContext } from 'aws-amplify';
import { serializeModel } from '@aws-amplify/datastore';
import { useState, useEffect } from 'react';

export default function Detail() {
  const { id } = useParams();
  const [yawara, setYawara] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      console.log("Fetching data!");
      const SSR = withSSRContext();
      // 注意：query是异步方法，必须加await
      const data = await SSR.DataStore.query(YawaraModel, id);
      setYawara(serializeModel(data));
      setLoading(false);
    };
    fetchData();
  }, [id]);

  if (loading) return <p>Loading...</p>;
  if (!yawara) return <p>Not found!</p>;

  console.log("Detail!");
  return <TechniqueListCard yawaraModel={yawara}/>;
}

方案2：切换到 Next.js 文件系统路由，保留 getStaticProps

如果你想继续使用 getStaticProps，需要将页面组件放在 Next.js 的 pages 目录下（比如 pages/[id].js），Next.js 会自动基于文件路径生成路由，并在构建或请求时触发 getStaticProps。同时注意修复原代码里的异步问题：给 SSR.DataStore.query 加上 await，否则会把 Promise 传给 serializeModel，导致数据错误。

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