Next.js API路由query参数undefined，无法读取id如何解决？

1. 修正前端API请求逻辑 #

确保getProduct函数正确将产品ID作为query参数拼接到请求URL中：

// 示例：lib/actions.ts 或产品页内的请求函数
async function getProduct(id: string) {
  // 明确拼接id到query参数
  const res = await fetch(`/api/singleproduct?id=${encodeURIComponent(id)}`);
  if (!res.ok) throw new Error('获取产品失败');
  return res.json();
}

同时验证产品页中searchParams.id的有效性：

// app/product/page.tsx
export default async function ProductPage({ searchParams }: { searchParams: { id?: string } }) {
  if (!searchParams.id) {
    return <div>缺少产品ID</div>;
  }
  const product = await getProduct(searchParams.id);
  // 渲染产品内容
}

2. 修正API路由的参数获取方式 #

Next.js App Router的API路由中，query参数需通过request.nextUrl.searchParams获取，而非Pages Router的req.query写法：

// app/api/singleproduct/route.ts
import { NextRequest, NextResponse } from 'next/server';
import connectDB from '@/lib/mongodb';
import Product from '@/models/Product';

export async function GET(request: NextRequest) {
  // 正确获取query中的id参数
  const productId = request.nextUrl.searchParams.get('id');

  if (!productId) {
    return NextResponse.json({ error: '必须提供产品ID' }, { status: 400 });
  }

  try {
    await connectDB();
    const product = await Product.findById(productId);
    
    if (!product) {
      return NextResponse.json({ error: '未找到对应产品' }, { status: 404 });
    }
    
    return NextResponse.json(product);
  } catch (err) {
    return NextResponse.json({ error: '查询产品失败' }, { status: 500 });
  }
}

常见错误排查点 #

• 确认API路由文件名为route.ts（App Router规范，而非route.tsx）
• 避免混淆App Router与Pages Router的参数获取逻辑，App Router无req.query属性
• 检查前端Link组件的URL拼接是否正确：href={/product?id=${product._id}}

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