Next.js+Sanity静态博客：获取前后文章时客户端返回异常

云上老周

2026-8-13

Sanity Client查询无法返回newPost对象的原因及解决办法

你遇到的问题核心是查询字符串中的HTML转义字符导致Sanity Client无法正确解析GROQ语法。

问题重现

你尝试通过以下查询获取当前文章的上一篇文章：

const query = `*[_type=='post' &amp;&amp; slug.current == $slug][0]{
  _id,title,_updatedAt,
  "newPost" : *[_type == 'post' &amp;&amp; ^._updatedAt &gt; _updatedAt][0] {
   title,"slug" : slug.current
 }
}`;
const param = {
  slug: "some-random-slug",
};
const nextPrev = await client.fetch(query, param);

该查询在Sanity Vision中正常运行，但通过Sanity Client调用时无法返回newPost对象。

原因分析

Sanity Vision接受的是原始GROQ语法，而你代码中的查询字符串使用了HTML转义字符：

&& 是HTML中&&的转义形式
> 是HTML中>的转义形式

当你在JS模板字符串中直接使用这些转义字符时，Sanity Client会将它们当作普通字符串传递给GROQ解析器，导致查询逻辑失效——解析器无法识别&&为逻辑与运算符，也无法识别>为大于运算符，自然无法正确筛选出符合条件的文章，最终返回空的newPost。

解决办法

将查询字符串中的HTML转义字符替换为原始的GROQ运算符：

const query = `*[_type=='post' && slug.current == $slug][0]{
  _id,title,_updatedAt,
  "newPost" : *[_type == 'post' && ^._updatedAt > _updatedAt][0] {
   title,"slug" : slug.current
 }
}`;
const param = {
  slug: "some-random-slug",
};
const nextPrev = await client.fetch(query, param);

修正后，Sanity Client可以正确解析GROQ查询逻辑，就能正常返回newPost对象了。