Next.js 15动态路由使用params时出现Sync Dynamic APIs错误的解决求助

我的问题场景 #

最近我在做Next.js项目的动态路由功能，目标是访问不同URL（比如wuilder.in/client1、wuilder.in/client2）时，在同一个页面展示不同的品牌内容（标题、logo、描述）。我在app/[client]/page.tsx里写了如下代码：

import brandingData from '@/data/brandingData';

export default function ClientWebsite({ params }: { params: { client: string } }) {
    const defaultConfig = { 
        title: "Welcome to Wuilder", 
        bgColor: "bg-gray-500",
        logo: "/logos/default.png",
        description: "Powerful websites for every business."
    };

    const clientConfig = brandingData[params.client] || defaultConfig;

    return (
        <div className='min-h-screen flex flex-col items-center justify-center'>
            <img src={clientConfig.logo} alt="Logo" className="w-32 h-32 mb-4" />
            <h1 className="text-white text-3xl font-bold">{clientConfig.title}</h1>
            <p className="text-white text-lg mt-2">{clientConfig.description}</p>
        </div>
    );
}

这段代码本来运行正常，能从brandingData.ts里正确获取并展示所有数据，brandingData.ts的代码是这样的：

type BrandingConfig = {
    title: string;
    logo: string;
    description: string;
};

const brandingData: Record<string, BrandingConfig> = {
    client1: { 
        title: "Client 1 - Tech Solutions", 
        logo: "/space/satelite-launch.jpg",
        description: "Innovative tech solutions for modern businesses.",
    },
    client2: { 
        title: "Client 2 - Fashion Hub", 
        logo: "/space/gabriele-garanzelli-PzO_CitnJdI-unsplash.jpg",
        description: "Trendy fashion and lifestyle brand.",
    },
    client3: { 
        title: "Client 3 - Coffee Express", 
        logo: "/space/spacex-OHOU-5UVIYQ-unsplash.jpg",
        description: "The best coffee experience, delivered to you.",
    }
};

export default brandingData;

但控制台一直弹出这个烦人的错误：

Error: Route "/[client]" used `params.client`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at client (app\[client]\page.tsx:11:45)
   9 |     };
  10 |
> 11 |     const clientConfig = brandingData[params.client] || defaultConfig;
     |                                             ^
  12 |
  13 |     return (
  14 |         <div className='min-h-screen flex flex-col items-center justify-center'>
 GET /client3 200 in 203ms

我试了各种办法都搞不定，现在就想把这个错误解决掉，求各位大佬帮忙！

问题原因&解决方案 #

这个错误是因为在Next.js 15的App Router中，params已经变成了一个Promise对象，不再是之前可以直接同步访问的普通对象了，所以必须先await它才能获取到里面的参数值。

你只需要做两个小修改就能解决：

1. 把page组件改成async异步函数
2. 先await params拿到实际的参数对象，再去访问client属性

修改后的app/[client]/page.tsx代码如下：

import brandingData from '@/data/brandingData';

// 改成async函数，同时更新params的类型为Promise
export default async function ClientWebsite({ params }: { params: Promise<{ client: string }> }) {
    const defaultConfig = { 
        title: "Welcome to Wuilder", 
        bgColor: "bg-gray-500",
        logo: "/logos/default.png",
        description: "Powerful websites for every business."
    };

    // 先await params获取真实的参数
    const { client } = await params;
    const clientConfig = brandingData[client] || defaultConfig;

    return (
        <div className='min-h-screen flex flex-col items-center justify-center'>
            <img src={clientConfig.logo} alt="Logo" className="w-32 h-32 mb-4" />
            <h1 className="text-white text-3xl font-bold">{clientConfig.title}</h1>
            <p className="text-white text-lg mt-2">{clientConfig.description}</p>
        </div>
    );
}

补充说明 #

• 因为Next.js的App Router允许page组件是异步函数，所以改成async完全不会有问题，框架会自动处理异步渲染
• 更新params的类型为Promise<{ client: string }>是为了让TypeScript不报错，保持类型安全

这样修改之后，你再访问对应的路由，那个烦人的Sync Dynamic APIs错误就应该消失了，功能也能正常运行~

备注：内容来源于stack exchange，提问作者Shivam Mishra