Next.js动态路由中params.slug无法打印及同步动态API错误的修复请求

嘿，我来帮你搞定这个问题！

你遇到的这个错误是Next.js App Router的典型问题——动态路由里的params参数是异步解析的，而你在同步组件里直接访问params.slug，就触发了「同步函数中使用动态API」的报错。

下面是具体的修复步骤：

修复/app/blog/[slug]/page.js文件 #

把原来的同步组件改成异步函数，并且手动await params.slug来获取实际的参数值：

import Slug from "@/app/Components/Slug";

const SlugRoute = async ({ params }) => {
  // 等待异步解析的slug参数
  const slug = await params.slug;
  return <Slug title={slug} />;
};

export default SlugRoute;

为什么要这么改？ #

Next.js为了优化动态路由的性能，会对params里的动态参数做懒加载处理，所以每个参数都是一个Promise对象，必须在异步函数中通过await获取到真实值后才能使用。

修改完成后，你的Slug组件里的console.log(title)就能正常打印出对应的slug值了，而且那个同步动态API的错误也会消失~

内容来源于stack exchange