当前位置：首页 > news >正文

Next.js V15 在异步页面中，获取路由动态参数的几个坑

news 来源：原创 2025/5/26 7:03:08

前言

最近几天用 next.js 开发了一个小项目，之前的项目基于 next.js 时，我都是使用的 jsx 的方式进行开发。而这次给客户升级，我升级为了 tsx 的方式进行开发，并且把 next.js 升级到了最新的 v15 版本。在开发过程中，遇到几个小坑，这里记录一下。

NEXTJS

目录构建

好，我的 nextjs APP 的目录构建如下所示：

src/app
├── article
│   └── [id]
│       └── page.tsx
├── channel
│   └── [id]
│       ├── [page]
│       │   └── page.tsx
│       └── page.tsx
├── layout.tsx
└── single└── [id]└── page.tsx

好，以上路径匹配路由为

# 首页
/
# 栏目页面
/channel/[id]
# 栏目分页页面
/channel/[id]/[page]
# 文章页面
/article/[id]
# 其他省略。

坑1，在页面中获取动态 id 失败

一开始，我用一下代码获取动态 id，结果获取失败。

export type PageChannelParamsTypes = {params: {id: stringpage?: string}
}export default async ({ params }: PageChannelParamsTypes) => {const { id, page: paramPage = 0 } = params//...
}

用 DeepSeek 和 Claude 3.5 两个 AI 问了半天，都解决不了，无奈，查询官方文档，最终解决了问题。调整后的代码如下：

export type PageChannelParamsTypes = {params: {id: stringpage?: string}
}export default async ({ params }: PageChannelParamsTypes) => {const { id, page: paramPage = 0 } = await params//...
}

OK, 终于可以获得 id 等参数了。我告诉 DeepSeek ，这里需要加一个 await ，DeepSeek 跟我犟嘴，非说我的代码是错误的。。。。

不管它，终于跑起来了。

坑2, 在编译过程中，提示出现失败

终于，把项目开发差不多了，准备编译一下，开心的运行了 pnpm run build 命令，然后我心拔凉拔凉的，编译失败，有如下报错：

 next build▲ Next.js 15.1.8Creating an optimized production build ...✓ Compiled successfullyLinting and checking validity of types  ...Failed to compile.src/app/article/[id]/page.tsx
Type error: Type 'PageParamsTypes' does not satisfy the constraint 'PageProps'.Types of property 'params' are incompatible.Type '{ id: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]Next.js build worker exited with code: 1 and signal: null

继续问 AI，答非所问，乱改一通。全部拒绝后，再次翻阅官方文档，终于解决了问题，最终代码如下：

export type PageChannelParamsTypes = {params: Promise<{id: stringpage?: string}>
}export default async ({ params }: PageChannelParamsTypes) => {const { id, page: paramPage = 0 } = await params//...
}