TypeScript：如何从Sanity API返回的JSON结果中提取值

问题概述 #

尝试从Sanity Client API调用结果中提取所需数据，但无法正确访问返回对象的属性值。

API返回结果 #

[
  {
    slug: { current: "test-post", _type: "slug" },
    authors: [
      {
        last_name: "xxx",
        profile_picture: "/images/xxx.png",
        _key: "xx",
        first_name: "xx",
        email: "xxx",
        _type: "author",
        bio: "xxxx  ",
      },
    ],
    _id: "xxx",
    banner_image: {
      alt_text: "Test Caption",
      _type: "image",
      caption: "Test Caption",
    },
    category: ["Strategy"],
    _updatedAt: "2023-02-18T15:43:28Z",
    headline:
      "Lets make a big deal of this post.  We want to bring in traffic to this post, so lets make it happen",
    publish_date: "2023-01-21T23:34:00.000Z",
    _rev: "0yPlmSh0SROjoBusCs2gsT",
    _type: "post",
    body: [
      {
        _key: "xxx",
        markDefs: [],
        children: [
          {
            text: "THIS IS A TEST POST",
            _key: "e256bcb6daf8",
            _type: "span",
            marks: ["strong"],
          },
        ],
        _type: "block",
        style: "h1",
      },
      {
        _key: "8ed793be8c68",
        markDefs: [],
        children: [
          { _type: "span", marks: [], text: "", _key: "2192a311988f" },
        ],
        _type: "block",
        style: "normal",
      },
      {
        style: "normal",
        _key: "ccbd634646c7",
        markDefs: [],
        children: [
          {
            _key: "ca3743dc66a2",
            _type: "span",
            marks: [],
            text: "THis is a test post ... THis is a test post ... THis is a test post ... a test post ... THis is a test post ... ",
          },
        ],
        _type: "block",
      },
      {
        markDefs: [],
        children: [
          { _type: "span", marks: [], text: "", _key: "bbd0babc70ff" },
        ],
        _type: "block",
        style: "normal",
        _key: "2a2b1d91ce0b",
      },
      {
        _type: "block",
        style: "h2",
        _key: "bf164f7a43db",
        markDefs: [],
        children: [
          {
            _type: "span",
            marks: ["strong"],
            text: "THIS IS A TEST POST",
            _key: "3544ed002a9c",
          },
        ],
      },
      {
        _key: "2cdb59177048",
        markDefs: [],
        children: [
          {
            _key: "4ef42b5af8c5",
            _type: "span",
            marks: [],
            text: "\na test post ... THis is a test post ... THis is a test post ... THis is a test post ... THis is a test post ... THis is a test post ... THis is a test post ... THis is a test post ... THis is a test post ... THis is a test post ... THis is a test post ... THis is a test post ... THis is a test post ... ",
          },
        ],
        _type: "block",
        style: "normal",
      },
      {
        _key: "14cc34e887dc",
        markDefs: [],
        children: [
          { marks: [], text: "", _key: "1fecc2c87c1c", _type: "span" },
        ],
        _type: "block",
        style: "normal",
      },
      {
        _type: "block",
        style: "normal",
        _key: "882f2ad2088d",
        markDefs: [],
        children: [
          { text: "", _key: "247eac8e2666", _type: "span", marks: [] },
        ],
      },
    ],
    title: "This is the title of the post2",
    _createdAt: "2023-01-21T23:38:11Z",
  },
];

尝试的代码 #

const result = await SanityClient.fetch(`*[_type == "post"] | order(publish_date desc)`,);
const document = JSON.stringify(result);
const post:Post = {
    title: document['title'],
    slug: document['slug.current'],
    headline: document[1]['headline'],
    publish_date: document['publish_date'],
    banner_image: document['banner_image'],
    category: document['category'],
    author: document['author'],
    body: document['body']
}

解决方案 #

问题分析 #

1. 错误使用JSON.stringify()：SanityClient.fetch()返回的已经是JavaScript数组/对象，转成字符串后无法用对象属性访问方式取值，这是核心问题。
2. 数组索引错误：返回结果是数组，第一个帖子应该用result[0]访问，而非document[1]（且document已是字符串，无法按数组索引访问）。
3. 属性名不匹配：API返回的是authors数组，代码中误用了author单数形式，导致取不到值。
4. 嵌套属性访问错误：slug.current不能直接用document['slug.current']，需要逐层访问对象属性。

修正后的代码 #

const result = await SanityClient.fetch(`*[_type == "post"] | order(publish_date desc)`);
// 取数组中的第一个帖子（如需处理多个帖子，可使用循环遍历result）
const firstPost = result[0];
const post: Post = {
    title: firstPost.title,
    slug: firstPost.slug.current,
    headline: firstPost.headline,
    publish_date: firstPost.publish_date,
    banner_image: firstPost.banner_image,
    category: firstPost.category,
    author: firstPost.authors[0], // 取第一个作者，可根据需求调整逻辑
    body: firstPost.body
};

关键说明 #

• 直接使用fetch返回的JS对象，不要转换为字符串。
• 因API返回的是帖子数组，需先通过索引（如result[0]）获取单个帖子对象。
• 嵌套属性需逐层访问，例如firstPost.slug.current。
• 注意API返回的作者字段是authors（复数）数组，需根据实际需求提取对应元素。

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