Next.js 14.2.4 generateStaticParams报错：静态导出参数缺失

云上老周

2026-6-21

问题排查与解决：Next.js 14.2.4 output: export 下的路由参数错误

错误原因分析

路由参数名不匹配：动态路由文件夹是[work]，意味着Next.js会将该路由的动态参数命名为work，但generateStaticParams返回的是{ id: "work-1" }这类对象，参数键名id和路由要求的work不匹配，导致Next.js无法识别对应静态页面的参数。
语法错误：generateStaticParams的返回数组中，元素之间缺少逗号，结尾用了冒号:而非分号;，引发代码执行异常。
参数解构错误：组件中从params解构了id，但实际params里只有对应路由的work字段，解构和后续逻辑不匹配。

解决方案

调整generateStaticParams返回的参数键名，将id改为work，和路由文件夹的参数名保持一致。
修复数组元素的逗号缺失问题，将结尾的冒号改为分号。
组件中从params解构work，并在switch逻辑中使用该值。

修正后的`/[work]/page.js`代码

import Work1 from "../works/Work1";
import Work2 from "../works/Work2";
import Work3 from "../works/Work3";

export function generateStaticParams() {
  return [
    { work: "work-1" },
    { work: "work-2" },
    { work: "work-3" }
  ];
}

export default function WorkPage({ params }) {
  const { work } = params;

  const project = (workId) => {
    switch (workId) {
      case "work-1":
        return <Work1 />;
      case "work-2":
        return <Work2 />;
      case "work-3":
        return <Work3 />;
      default:
        return <h1>Something went wrong.</h1>;
    }
  };

  return <div>{project(work)}</div>;
}