Next.js 14中GET请求处理报错：无法解构req.query的'q'属性

错误原因分析 #

你的代码存在三个核心问题：

• API路由写法混淆：Next.js 14的App Router（app/api/.../route.ts）采用NextRequest/NextResponse处理请求，而非Pages Router的NextApiRequest/NextApiResponse，后者的req.query在App Router中不存在。
• 错误使用客户端钩子：useRouter是客户端组件专用的路由钩子，服务器端的API路由无法调用，调用后会直接报错。
• 变量名冲突：解构时const { q: query }的query变量与前面useRouter解构的query重名，同时req.query本身就不存在。

修正后的API路由代码 #

import { PrismaClient } from "@prisma/client";
import { NextRequest, NextResponse } from "next/server";

const prisma = new PrismaClient();

export async function GET(req: NextRequest) {
    try {
        // 从NextRequest的searchParams中获取查询参数
        const query = req.nextUrl.searchParams.get("q");
        
        if (!query || typeof query !== "string") {
            throw new Error("Invalid request: 'q' must be a non-empty string");
        }

        const products = await prisma.productCN.findMany({
            where: {
                title: {
                    contains: query,
                    mode: "insensitive",
                },
            },
        });

        return NextResponse.json({ products });
    } catch (error) {
        console.error(error);
        // 统一错误响应格式，避免直接返回Error对象
        return NextResponse.json(
            { message: error instanceof Error ? error.message : "Unknown error" },
            { status: 400 }
        );
    }
}

关键修改说明 #

• 替换请求类型：将参数从NextApiRequest/NextApiResponse改为NextRequest，App Router的API路由不需要res参数，直接返回NextResponse即可。
• 正确获取查询参数：通过req.nextUrl.searchParams.get("q")获取URL中的查询参数，这是App Router服务器端获取查询参数的标准方式。
• 移除无效代码：删除useRouter的调用，避免客户端钩子在服务器端执行报错。
• 优化错误处理：增加!query判断，确保参数非空，同时统一错误响应的格式和状态码。

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