Next JS中getResourcesDetail调用失败，Sanity数据标题无法显示

1. 先看控制台的resources输出 #

直接查看终端或浏览器控制台里console.log(resources)的结果：

• 如果输出是null或undefined：说明没有匹配到对应slug的资源，得检查Sanity文档是否存在，且slug字段的current值和页面URL里的slug完全一致（注意大小写、特殊字符）。
• 如果输出有内容但没有title字段：说明GROQ查询或Sanity文档的字段配置有问题。

2. 验证Sanity文档的匹配性 #

• 登录Sanity Studio，找到resource类型的目标文档，确认其slug.current值和页面URL中的slug完全一致（比如URL是/resource/guide-book，那slug.current必须是guide-book）。
• 确保文档已经发布，未发布的文档无法通过readClient获取。

3. 检查GROQ查询的正确性 #

当前的查询语句：

*[_type == 'resource' && slug.current == $slug][0]
{
  _id,
  title,
  downloadLink,
  "image": poster.asset->url,
  views,
  category,
  "slug" : slug.current,
}

• 确认Sanity中resource类型的标题字段确实叫title（字段名区分大小写）。
• 如果title是本地化字段（比如用了多语言插件），需要写成title.zh-CN这类格式（对应你的语言代码），否则会返回undefined。
• 可以在Sanity Studio的Vision工具里直接运行这个查询，把$slug替换成实际值，看返回结果里是否包含title字段。

4. 修复函数的异常返回逻辑 #

当前getResourcesDetail函数在捕获错误后只打印日志，没有返回值，会导致出错时返回undefined。修改函数确保返回值明确：

export async function getResourcesDetail(slug: string) {
  try {
    const resources = await readClient.fetch(
      groq`
      *[_type == 'resource' && slug.current == $slug][0]
      {
        _id,
        title,
        downloadLink,
        "image": poster.asset->url,
        views,
        category,
        "slug" : slug.current,
      }
      `,
      { slug }
    );

    return resources;
  } catch (error) {
    console.error('获取资源详情失败:', error);
    return null; // 明确返回null，避免返回undefined
  }
}

5. 页面添加空状态处理 #

在页面里增加判断，既方便调试也提升用户体验：

async function Resource({ params }: Props) {
  const slug = params.slug;
  const resources = await getResourcesDetail(slug);
  console.log('获取到的资源:', resources);

  if (!resources) {
    return <section className="text-white">未找到对应资源</section>;
  }

  return (
    <section>
      <div className="text-white max-w-2xl">
        <p>{slug}</p>
        <p>{resources.title}</p>
      </div>
    </section>
  );
}

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