NextJS动态页面getServerSideProps返回空对象，如何从Sanity取数？

1. 修复组件接收Props的方式 #

你的profile组件直接将data作为参数，但Next.js会把getServerSideProps返回的props包裹在一个对象中传入组件，这会导致你打印的data是包含props的外层对象而非实际数据。正确写法如下：

// 错误写法
function profile(data) {
  console.log(data) // 此处的data是{ data: [...] }而非预期的数组
  return(<></>)
}

// 正确写法
function Profile({ data }) {
  console.log(data) // 现在能拿到Sanity返回的实际数据
  return(<></>)
}

2. 验证Sanity Client配置 #

确认你的Sanity Client已正确初始化，包含正确的项目信息与权限配置：

import { createClient } from '@sanity/client'

const client = createClient({
  projectId: '你的项目ID',
  dataset: '你的数据集名称',
  apiVersion: '2023-05-03', // 使用最新API版本
  useCdn: false, // 服务端取数建议关闭CDN，确保获取最新数据
  token: process.env.SANITY_READ_TOKEN // 私有数据集需配置读取token
})

3. 检查Sanity查询有效性 #

直接在Sanity Studio的Vision工具中运行查询语句*[_type == "marketItems"] { contractAddress }，确认：

• marketItems类型名称拼写正确（Sanity类型名区分大小写）
• 数据集中确实存在该类型的文档
• contractAddress字段在文档中存在且有值

4. 动态路由的getServerSideProps参数处理 #

即便不需要URL中的用户ID，也可以保留context参数（不影响数据获取），同时可以在函数内打印数据，确认是否从Sanity成功取数：

export async function getServerSideProps(context) {
  const query = `*[_type == "marketItems"]  {
    contractAddress,
  }`;

  const data = await client.fetch(query);
  console.log('Sanity返回数据:', data); // 验证取数结果
  return {
    props: {
      data,
    },
  };
}

5. 适配App Router（若使用） #

如果你的项目用的是Next.js App Router，getServerSideProps已不再适用，需改为在服务器组件中直接取数：

// app/profile/[id]/page.js
import client from '@/lib/sanity-client'

async function Profile({ params }) {
  const query = `*[_type == "marketItems"]  {
    contractAddress,
  }`;
  const data = await client.fetch(query);
  console.log(data);
  return <></>;
}

export default Profile;

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