Sanity+Next.js查询数组中图片及详情失败求助

问题排查 #

1. 查询语句冗余且未过滤：你写了两个查询，imagesQuery没有通过slug过滤，返回的是所有set类型文档的图片数组，而非当前slug对应的目标数据。同时两次请求完全可以合并，减少不必要的网络开销。
2. 组件调用错误：<img>标签使用了href属性（正确应为src），且未对图片数组进行遍历，直接访问不存在的imagesData.image属性，导致渲染无内容。
3. 数据结构不匹配：你的set_images是数组类型，组件中未处理数组遍历逻辑，无法渲染多张图片。

修复代码 #

1. 优化getServerSideProps查询

合并查询逻辑，直接在获取目标set文档的同时，嵌套查询set_images的所有字段：

export const getServerSideProps = async (pageContext) => {
  const setSlug = pageContext.query.slug;

  // 合并查询，一次性获取目标set及其关联的图片数据
  const setQuery = `*[_type == 'set' && slug.current == $setSlug][0]{
    set_name,
    slug,
    set_images[]{
      asset->{_id, url},
      alt,
      name,
      date,
      size,
      materials
    }
  }`;

  const setData = await client.fetch(setQuery, { setSlug });

  return {
    props: { setData } // 只需要返回setData即可
  }
}

2. 修复组件渲染逻辑

遍历setData.set_images数组，使用正确的<img>属性渲染图片及详情：

// 先判断setData是否存在，避免空值报错
if (!setData?.set_images) {
  return <div>No images found</div>;
}

return (
  <ul>
    {setData.set_images.map((imageItem, index) => (
      <li key={imageItem.asset._id || index}>
        <img 
          src={imageItem.asset.url} 
          alt={imageItem.alt || imageItem.name || 'Image'} 
        />
        <div>
          <p>名称：{imageItem.name}</p>
          <p>日期：{imageItem.date}</p>
          <p>尺寸：{imageItem.size}</p>
          <p>材质：{imageItem.materials}</p>
        </div>
      </li>
    ))}
  </ul>
);

关键说明 #

• Sanity的图片字段中，自定义字段（alt、name等）直接挂载在图片对象上，而url需要从asset引用中获取。
• 始终添加空值判断（如setData?.set_images），避免因查询结果为空导致的渲染报错。
• 列表项的key优先使用imageItem.asset._id（唯一标识），索引仅作为兜底方案。

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