Next.js集成Sanity调用getComments接口报tweetId解析错误

报错触发的直接原因是传给Sanity GROQ查询的$tweetId参数值为undefined，Sanity要求ID类参数必须是字符串格式，无法解析undefined值因此抛出解析错误。问题出在两个环节：一是前端调用fetchComments方法时未传入合法的tweetId字符串，二是API路由层未做参数合法性校验，直接将空值透传给了Sanity客户端。

• 全局检索所有fetchComments的调用位置，检查调用时是否传入了有效的推文ID，重点排查时序问题：比如是否存在推文详情数据还在加载、tweetId尚未赋值的情况下，就提前触发了评论拉取请求。
• 手动验证接口逻辑：在浏览器地址栏访问带合法参数的接口地址，格式为http://localhost:3000/api/getComments?tweetId=Sanity库中存在的真实tweet文档ID，如果此时接口能正常返回评论列表，说明GROQ查询写法本身没有问题，故障点在前端传参环节。
• 检查API层参数接收逻辑：确认Next.js的req.query是否能正确取到tweetId值，排除参数名拼写错误、路由匹配规则异常导致的参数丢失问题。

1. 前端请求方法增加防御逻辑 #

修改fetchComments.ts，提前拦截非法参数，避免发送无效请求，同时对URL参数做编码处理：

import { Comment } from "../typings"

export const fetchComments = async (tweetId: string) => {
     // 无合法tweetId时直接返回空数组，不发起请求
     if (typeof tweetId !== 'string' || !tweetId.trim()) {
        return []
     }
     const res = await fetch(`/api/getComments?tweetId=${encodeURIComponent(tweetId)}`)
     if (!res.ok) throw new Error('评论拉取失败')
     const comments: Comment[] = await res.json()
     return comments
}

如果是在React/Vue等框架的组件中调用该方法，需要加时序控制：以React的useEffect为例，必须将tweetId加入依赖数组，只有当tweetId为非空字符串时才执行拉取逻辑，不要在tweetId为undefined的状态下触发请求。

2. API路由层加入参校验 #

修改getComments.ts，在调用Sanity查询前先校验参数合法性，避免空值透传：

import type { NextApiRequest, NextApiResponse } from "next";
import { groq } from "next-sanity";
import { sanityClient } from "../../sanitytwitter/sanity";
import { Comment } from "../../typings";

const commentQuery = groq`
*[_type == "comment" && references(*[_type == 'tweet' && _id == $tweetId]._id )]
{
    _id,
    ...
} | order(_createdAt desc)
`

type Data = Comment[] | { error: string }

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse<Data>
) {
    const { tweetId } = req.query;

    // 非法参数直接返回400错误，不执行Sanity查询
    if (typeof tweetId !== 'string' || !tweetId.trim()) {
        return res.status(400).json({ error: '请传入有效的tweetId参数' })
    }

    const comments: Comment[] = await sanityClient.fetch(commentQuery, {
        tweetId,
    })

    res.status(200).json(comments)
}

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