错误：页面缺少参数“generateStaticParams()”，这是“output：export”配置所必需的

Question

我仅在导航期间看到此错误， 此错误仅在导航期间出现，刷新浏览器后就会消失

Error: Page "/(publish)/logs/publish/[id]/page" is missing param "/logs/publish/BrWyKK8oGhiSAnTrLDAX" in "generateStaticParams()", which is required with "output: export" config.

这是应用程序的文件夹结构，使用

app router

和多种布局

root /
    ├──src
    │    ├── app /
    │    │    ├── (main)/
    │    │    │    ├── _models/
    │    │    │    │   ├── Log.ts
    │    │    │    ├── _services/
    │    │    │    │   ├── LogService.ts
    │    │    │    ├── _components/
    │    │    │    │   ├── Sidebar.tsx
    │    │    │    │   ├── Navbar.tsx
    │    │    │    │   ├── Pastelog.tsx
    │    │    │    │   │
    │    │    │    ├── logs /
    │    │    │    │   ├──[id]
    │    │    │    │   │   └── page.tsx
    │    │    │    │   └── layout.tsx
    │    │    │    │   └── page.tsx
    │    │    ├── (publish)/
    │    │    │    ├── logs /
    │    │    │    │   ├── publish /
    │    │    │    │   │    ├──[id]/
    │    │    │    │   │        └── page.tsx
    │    │    │    └── layout.tsx
    │    │    │
    │    │    └── layout.tsx
    │    │    └── global.css
    │    │    └── page.tsx

我有一个侧边栏和一个主要内容（粘贴日志/预览）

渲染

粘贴日志：位于

baseurl/logs

预览：

baseurl/logs/[id]

• 侧边栏是一个客户端组件，它呈现本地存储中的日志列表（工作正常）
• Pastelog 有一个按钮可以发布日志并重定向到

  baseurl/logs/publish/id

当我点击发布时，我将数据保存到 firestore 和本地存储并重定向到动态路由

（发布方法）

    async function publish() {
        setLoading(true);
        const log = new Log(
            expiryDate.toDate('UTC'),
            content,
            new Date(),
            LogType.TEXT,
            true,
            title,
            false,
        );
        const id = await logService.publishLog(log);
        if (!id) {
            setLoading(false);
            return;
        }
        router.push(`/logs/publish/${id}`);
        setLoading(false);
    }

数据存储在本地存储和 firestore 中，但是当我重定向到动态路由时，我看到此错误

Error: Page "/(publish)/logs/publish/[id]/page" is missing param "/logs/publish/BrWyKK8oGhiSAnTrLDAX" in "generateStaticParams()

// logs/publish/[id]/page.tsx
import Preview from '@/app/(main)/_components/Preview';
import LogService from '@/app/(main)/_services/logService';

// This is required for dynamic routing in runtime
export const dynamicParams = true;

export async function generateStaticParams() {
    const logService = new LogService();
    const logs = await logService.fetchLogs();
    // logs.forEach(log => console.log(log.id));
    return logs.map(log => ({ id: log.id }));
}
export default function PublishPage({ params }: { params: { id: string } }) {
    const { id } = params;
    return <Preview
        logId={id}
    />
};

我期望动态页面在

logs/publish/id

加载，我在调用

generateStaticParams

时检查了日志

const logs = await logService.fetchLogs();

包含新发布页面的ID，意味着文档已保存到数据库

如果有人有兴趣浏览一下源代码

在此处尝试该应用程序：http://pastelog.web.app/

Answer 1

那么它是如何工作的，没有参数 因此，每当您访问该页面时，它首先从数据库中获取所有日志 ID 它保存日志的内容 如果您尝试再次访问该页面，它将显示其包含的所有内容 但它没有找到该参数的任何内容，这导致了错误 您不能使用静态构建。

你必须使用正常的构建！