NextJS 13中如何在API路由正确获取postId？

嘿，我看你这里的问题很明确啦——你前端是把postId放在了API路由的路径里（/api/editpost/${postId}），但后端却在找查询参数里的postId，这可不就对不上嘛！

来给你捋清楚正确的做法：

第一步：调整API路由的文件结构 #

在app/api/editpost目录下，创建一个名为[postId]的文件夹，然后在这个文件夹里新建route.ts文件。这个[postId]是NextJS App Router里用来匹配动态路径参数的特殊命名方式，它会自动捕获URL中对应位置的值。

第二步：在API路由中获取路径参数 #

在[postId]/route.ts里，你可以通过函数的第二个参数来拿到动态路径参数，而不是用searchParams。修改后的代码如下：

import { NextRequest, NextResponse } from 'next/server';

export const GET = async (req: NextRequest, { params }: { params: { postId: string } }) => {
  const postId = params.postId;
  console.log(postId); // 这下就能输出正确的postId啦！
  
  // 这里可以继续写你的业务逻辑，比如根据postId查询数据并返回
  return NextResponse.json({ success: true, postId });
};

为什么之前的方式不行？ #

你前端请求的是/api/editpost/xxx这种形式，postId是URL路径的一部分，属于动态路由参数；而req.nextUrl.searchParams.get('postId')是用来获取/api/editpost?postId=xxx这种带问号的查询参数的，这俩是完全不同的传参方式，自然拿不到值啦。

如果实在想改用查询参数的方式传值（不推荐当前场景），那前端的fetch要改成这样：

const fetchPost = async (postId: string) => {
  const res = await fetch(`/api/editpost?postId=${postId}`);
  const post = await res.json();
};

这时候后端用你原来的searchParams写法就能拿到值，但显然用动态路由更符合RESTful的风格，也更贴合你现在的代码结构。

备注：内容来源于stack exchange，提问作者Daryl Wong