Next.js静态导出报错：generateStaticParams缺失/blog/testpost参数

我参考Next.js官方博客启动示例搭建个人博客时，出现如下报错：

Error: Page "/blog/[slug]/page" is missing param "/blog/testpost" in "generateStaticParams()", which is required with "output: export" config.

其中testpost是我posts文件夹下的一个Markdown文件名，以下是相关代码，请分析报错原因。

相关代码 #

lib/api.ts #

import fs from 'fs';
import matter from 'gray-matter';
import { join } from 'path';

const postsDirectory = join(process.cwd(), 'posts');

export function getPostSlugs() {
  return fs.readdirSync(postsDirectory);
}

type Post = {
  slug: string;
  title: string;
  date: string;
  content: string;
  coverImage: string;
  description: string;
};

export function getPostBySlug(slug: string) {
  const realSlug = slug.replace(/\.md$/, '');
  const fullPath = join(postsDirectory, `${realSlug}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
  const { data, content } = matter(fileContents);
  return { ...data, slug: realSlug, content } as Post;
}

export function getAllPosts(): Post[] {
  const slugs = getPostSlugs();
  const posts = slugs
    .map((slug) => getPostBySlug(slug))
    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1));
  return posts;
}

/blog/[slug]/page.tsx #

import { getAllPosts, getPostBySlug } from '@/app/lib/api';
import { notFound } from 'next/navigation';
import markdownToHtml from '@/app/lib/markdowntoHtml';
import Link from 'next/link';
import { Metadata } from 'next';

type Params = {
  params: {
    slug: string;
  };
};

export default async function Page({ params }: Params) {
  const post = getPostBySlug(params.slug);
  if (!post) {
    return notFound();
  }

  const content = await markdownToHtml(post.content || '');

  return (
    <main>
      <article>
        <h1>{post.title}</h1>
      </article>
    </main>
  );
}

export async function generateStaticParams() {
  const posts = getAllPosts();

  return posts.map((post) => {
    slug: post.slug;
  });
}

报错原因分析 #

问题出在generateStaticParams函数的map回调写法上：

• 你在回调里试图返回{ slug: post.slug }对象，但没有用圆括号包裹，导致这段代码被解析为代码块而非对象字面量。此时回调函数默认返回undefined，最终generateStaticParams返回的是一个全为undefined的数组，Next.js无法获取到正确的slug参数，因此报错说缺少testpost这个参数。

修复方法 #

给对象字面量加上圆括号，让解析器识别为返回对象：

export async function generateStaticParams() {
  const posts = getAllPosts();

  return posts.map((post) => ({
    slug: post.slug
  }));
}

或者显式添加return语句：

export async function generateStaticParams() {
  const posts = getAllPosts();

  return posts.map((post) => {
    return { slug: post.slug };
  });
}

修改后，generateStaticParams就能正确返回包含所有slug的参数数组，Next.js在静态导出时会为每个post生成对应的静态页面。

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