如何从自定义Sanity Schema获取数据？报错求助

问题场景 #

创建了包含图片对象数组的Schema，每个图片对象包含字符串类型的size字段（用于控制图片尺寸类名）和带热点设置的image字段。尝试获取数据并遍历数组时，始终出现“无法读取未定义属性”的错误。

相关代码 #

Schema定义

{
  name: 'images',
  title: 'Images',
  type: 'array',
  of: [
    {
      type: 'object',
      name: 'img',
      fields: [
        {
          name: 'size',
          type: 'string',
          title: 'Size',
        },
        {
          name: 'image',
          type: 'image',
          title: 'Image',
          options: {
            hotspot: true,
          },
        },
      ]
    }
  ]
},

数据获取代码（useEffect）

useEffect(() => {
  sanityClient.fetch(`*[slug.current == "${slug}"]{
    title,
    _id,
    slug,
    style,
    body,
    thumbnail{
        asset->{
            url
        },
    },
    images[]{
        asset->{
          _id,
          url,
        },
      size  
    },
    "categories": categories[]->title 
  }`)
    .then((data) => setSinglePost(data[0]))
    .catch(console.error);
}, [slug]);

渲染代码

{singlePost && singlePost.images && singlePost.images.map((e, index) => ( 
       <Image2 style={e.size} src={e.image.asset.url} key={index} />
))}

错误原因 #

GROQ查询语句不符合Schema结构：Schema中images数组的每一项是包含size和image字段的对象，但查询时直接提取了asset和size，导致返回的images数组项中没有image属性，渲染时访问e.image.asset.url自然会抛出“未定义属性”错误。

修正方案 #

方案1：修正GROQ查询（推荐） #

严格按照Schema的嵌套结构，正确获取image字段及其关联的asset数据：

useEffect(() => {
  sanityClient.fetch(`*[slug.current == "${slug}"]{
    title,
    _id,
    slug,
    style,
    body,
    thumbnail{
        asset->{
            url
        },
    },
    images[]{
      size,
      image{
        asset->{
          _id,
          url
        },
        hotspot // 如果需要热点数据可添加
      }
    },
    "categories": categories[]->title 
  }`)
    .then((data) => setSinglePost(data[0]))
    .catch(console.error);
}, [slug]);

此方案保持数据结构与Schema一致，后续维护更清晰。

方案2：调整渲染代码 #

如果不想修改查询，可直接适配当前查询返回的数据结构：

{singlePost && singlePost.images && singlePost.images.map((e, index) => ( 
       <Image2 style={e.size} src={e.asset.url} key={index} />
))}

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