如何修复 Next.js 15 动态路由预渲染错误

Question

我有一条动态路线，没有

use cache

叙述。

// /search/[query]/page.tsx 
import { Suspense } from "react";

import SearchQuery from "@/components/Search/Query";
import { Skeleton } from "@/components/ui/skeleton";

export default async function SearchPage({
    params,
}: {
    params: Promise<{ query: string }>;
}) {
    const queries = params.then(param => param.query);

    return (
        <Suspense fallback={<Skeleton className="h-[140px] w-full" />}>
            {/* @ts-expect-error Async Server Component */}
            <SearchQuery queries={queries} />
        </Suspense>
    );
}

当我尝试构建项目时，出现预渲染错误：

Route "/search/[query]": A component accessed data, headers, params, searchParams, or a short-lived cache without a Suspense boundary nor a "use cache" above it. We don't have the exact line number added to error messages yet but you can see which component in the stack below. See more info: https://nextjs.org/docs/messages/next-prerender-missing-suspense

我已经尝试过使用

use cache

，同样的结果。

疯狂的是，当我尝试 Next.js 文档中的官方示例时，它仍然抛出相同的错误。

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return <h1>Blog Post: {slug}</h1>
}

这段代码引发了同样的错误。

这是我的

next.config.mjs

:

import path from "path";

const __dirname = path.resolve();

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        reactCompiler: true,
        dynamicIO: true,
    },
    sassOptions: {
        includePaths: [path.join(__dirname, "components")],
        prependData: `@use "@/assets/mixins" as *;`,
    },
    transpilePackages: ["@web3-name-sdk/core"],
};

export default nextConfig;

我的下一个版本是

^15.1.1-canary.7

。

Answer 1

我遇到了同样的错误，并且能够修复使用 Suspense 封装页面的问题：

export default async function Page({ params }: { params: Promise<{ slug: string }>
}) {
  return (
    <Suspense>
        <SuspensedPage params={params}></SuspensedPage>
    </Suspense>
  );
}

async function SuspensedPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  return <h1>Blog Post: {slug}</h1>
}