Next.js+Sanity图片URL解析失败求助：传入undefined报错

核心错误原因 #

你把useState的解构写法搞反了——useState返回的是数组，不是对象，用对象解构const { index, setIndex } = useState(0)会直接导致index为undefined。此时image[index]等价于image[undefined]，结果是undefined，传给urlFor自然触发了“无法解析undefined来源的图片URL”的报错。

修复步骤 #

1. 修正useState解构方式 #

把组件内的useState代码改成数组解构：

// 错误写法
// const { index, setIndex } = useState(0);

// 正确写法
const [index, setIndex] = useState(0);

2. 增加空值防护（可选但推荐） #

即使修正了index，也建议给图片路径加上空值判断，避免数组为空或索引越界的情况：

// 主图的src
<img 
  src={urlFor(image?.[index] || '')} 
  className="product-detail-image" 
  alt={name}
/>

// 小图的src
<img 
  key={i}
  src={urlFor(item || '')}
  className={i === index ? 'small-image selected-image' : 'small-image'}
  onMouseEnter={() => setIndex(i)}
  alt={`${name} 缩略图 ${i+1}`}
/>

3. 确认Sanity查询完整性（可选） #

虽然你提到console.log能拿到image数组，但可以检查getStaticProps里的查询是否完整拉取了图片字段。当前查询*[_type == "product" && slug.current == '${slug}'][0]会返回所有顶级字段，没问题，但如果后续有字段调整，可以明确指定字段确保拉取：

const query = `*[_type == "product" && slug.current == '${slug}'][0] {
  image,
  name,
  details,
  price,
  slug
}`;

错误调用栈说明 #

报错发生在服务端渲染阶段（ReactDOMServer.renderToString），因为页面生成时index是undefined，导致传入urlFor的参数是undefined，触发了Sanity image-url库的参数校验逻辑。

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