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

建站教程流程图百度搜索引擎链接

news 2025/10/7 2:43:49

建站教程流程图,百度搜索引擎链接,网络营销做得好的品牌,卫浴品牌排行榜前十名前言最近几天用 next.js 开发了一个小项目，之前的项目基于 next.js 时，我都是使用的 jsx 的方式进行开发。而这次给客户升级，我升级为了 tsx 的方式进行开发，并且把 next.js 升级到了最新的 v15 版本。在开发过程中，…

前言

最近几天用 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//...
}