Next.js SSR对接Sanity获取文章时posts未定义报错如何解决

开发者阿泽

2026-8-27

问题定位

你的报错核心原因是服务端返回的props字段名和页面组件接收的字段名不匹配，另外还有几处配置/代码细节需要修正：

字段名不一致：getServerSideProps 中查询完成后返回的props key是post，但组件解构时取的是posts，两者名称对不上，组件自然拿不到对应值，返回undefined。
TS类型定义错误：Props里写的posts: [Post]是长度为1的元组类型，不符合Sanity返回的数组结构，应该改成数组类型Post[]。
未做Sanity客户端配置校验：如果修正字段名后还是拿不到数据，需要检查客户端初始化参数。

修正方案

1. 统一字段命名

修改getServerSideProps中的变量和返回值，和组件接收的字段对齐：

export const getServerSideProps = async () => {
  const query = `*[_type == "post"]{
    _id,
    title,
    author ->{
      name,
      image
    },
    description,
    mainImage,
    slug
  }`
  // 变量名统一为posts
  const posts = await sanityClient.fetch(query);
  // 返回的props key也对应为posts
  return { props: { posts } }
};

2. 修正TS类型定义

把Props的类型改成正确的数组结构：

interface Props {
  posts: Post[];
}

3. 校验Sanity客户端配置

确认你初始化sanityClient时的参数符合以下要求：

projectId、dataset和你Sanity后台的项目参数完全一致
配置了有效的API版本号（比如2024-01-01）
本地开发域名已经添加到Sanity后台的CORS可信源列表中，没有开启跨域拦截

4. 补充空状态兜底

在渲染文章列表的位置加个空判断，避免数据加载异常时页面空白：

<div>
  {posts?.length ? posts.map((post) => (
    <Link key={post._id} href={`/post/${post.slug.current}`}>
      <div>
        <img src={urlFor(post.mainImage).url()!} alt={post.title} />
      </div>
      <div>
        <div>
          <p>{post.title}</p>
          <p>
            {post.description} by {post.author.name}
          </p>
        </div>
        <img src={urlFor(post.author.image).url()!} alt={post.author.name} />
      </div>
    </Link>
  )) : <p>暂无文章</p>}
</div>