Next.js App Router动态路由页面出现sync-dynamic-apis错误求助

问题情况 #

在Next.js App Router的动态路由组件中触发sync-dynamic-apis错误，页面在浏览器中能正常渲染，但终端持续弹出报错提示，错误指向文件路径：file://C%3A/Users/user/Desktop/React/next/projects/lesson1/src/app/products/%5Bproduct%5D/page.tsx:3:12。

当前使用的代码如下：

// app/products/[id]/page.tsx
export default function PostPage({ params }: { params: { id: string } }) {
    return (
        <div>
            <h1>Product: {params["id"]}</h1>
        </div>
    );
}

问题原因及修复方案 #

这个错误的核心是动态路由文件夹名称与代码中params的键不匹配：你的路由文件夹实际是[product]，但代码里却用params["id"]获取参数，框架静态分析时检测到参数定义与使用不符，因此触发错误。

有两种修复方式：

1. 同步代码与路由文件夹名称
   将代码中的参数名改为与文件夹一致的product，同时更新类型定义：

// app/products/[product]/page.tsx
export default function PostPage({ params }: { params: { product: string } }) {
    return (
        <div>
            <h1>Product: {params.product}</h1>
        </div>
    );
}

2. 同步路由文件夹与代码参数名
   如果想保留代码里的id作为参数名，直接将路由文件夹重命名为[id]，确保路径为src/app/products/[id]/page.tsx即可。

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