Next.js 13实验性App目录构建时动态路由params不可用求助

首先明确：你不需要用generateStaticParams，这个API是用来生成全静态页面的路由参数，和你要的动态运行时获取参数的需求完全冲突。

问题根源在于构建阶段Next.js的自动静态优化逻辑——它会尝试预渲染页面，但此时没有实际的params传入，导致你的afunction因参数缺失报错。要解决这个问题，你需要明确告诉Next.js：这个页面要在**运行时（服务器端）**渲染，而不是提前预渲染成静态文件。

具体做法：

• 在你的page.jsx文件顶部，添加export const dynamic = 'force-dynamic'。这个配置会强制页面在每次请求时都在服务器端执行渲染逻辑，构建阶段不会尝试预渲染，自然也就不会因为缺少params报错。
• 确保你的afunction是在page组件的服务器端逻辑中执行（App目录下的page.jsx默认是服务器组件，所有代码都在服务器端运行），请求时能直接拿到真实的params数据。

示例代码：

// app/[itemid]/[slug]/page.jsx
export const dynamic = 'force-dynamic'; // 关键配置，强制服务器端渲染

export default async function Page({ params }) {
  // 这里能正常获取到请求时的params.itemid和params.slug
  const result = await afunction(params.itemid);
  
  return (
    <div>
      {/* 页面内容渲染 */}
    </div>
  );
}

如果后续你想兼顾性能（比如对热门页面做缓存），可以改用增量静态再生（ISR），配置revalidate参数即可：

export const revalidate = 60; // 每60秒自动重新生成页面缓存

这种方式既可以缓存页面提升访问速度，又能在数据库内容更新时自动刷新缓存，同时构建阶段不需要提前知道所有路由参数。

总结：

• 完全不需要generateStaticParams，它只适用于全静态生成场景
• 用dynamic: 'force-dynamic'跳过构建预渲染，强制运行时服务器端渲染
• 可选revalidate参数实现ISR，平衡性能与动态性

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