NextJS中req.query参数传入Prisma Where结构类型错误问题

错误原因 #

Next.js中req.query的参数类型是string | string[]，这是因为HTTP协议允许同一个参数名多次出现（比如?slug=foo&slug=bar），所以TypeScript会默认标记参数为可能是数组类型。而你的Prisma模型里slug字段是String类型，要求传入string或StringFilter，数组类型不匹配，因此抛出TS2322类型错误。

解决方案 #

因为你用的是动态路由[slug].ts，正常请求路径（比如/api/posts/this-is-my-slug）中的slug必然是单个字符串，所以可以通过以下方式确保类型正确：

方式1：类型断言（简单直接）

直接告诉TypeScript这个参数是字符串类型：

const { slug } = req.query;
// 类型断言为string
const article = await prismaClient.posts.findFirst({
    where: {
        slug: slug as string
    }
})

方式2：安全处理数组情况（更严谨）

如果担心极端情况（比如手动构造带多个slug参数的请求），可以先检查并处理数组：

const rawSlug = req.query.slug;
// 若为数组则取第一个元素，否则直接用原参数
const slug = Array.isArray(rawSlug) ? rawSlug[0] : rawSlug;

if (!slug) {
    // 处理slug为空的情况，比如返回400
    return res.status(400).json({ error: 'Slug is required' });
}

const article = await prismaClient.posts.findFirst({
    where: {
        slug: slug
    }
})

方式3：转换为字符串（兼容所有情况）

用toString()方法统一转换为字符串，空值时设默认值：

const slug = req.query.slug?.toString() || '';

if (!slug) {
    return res.status(400).json({ error: 'Slug is required' });
}

const article = await prismaClient.posts.findFirst({
    where: {
        slug: slug
    }
})

验证说明 #

硬编码字符串时没有错误，是因为硬编码的值明确是string类型，TypeScript能直接确认类型匹配；而req.query.slug的类型不确定，所以需要手动处理类型，让TypeScript确认传入Prisma的是合法的string类型。

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