Next.js TypeScript构建报错：迭代元素缺失key prop求助

你遇到的Missing "key" prop for element in iterator报错，根源是**projects.map循环生成的外层<div>没有添加唯一key属性**——你已经给technologies.map里的Image加了key，但漏掉了projects列表的顶层元素key。本地开发环境React对key的检查比较宽松，所以能正常运行，但生产构建（npm run build）会做严格校验，因此触发报错。

修复方案 #

给projects.map返回的最外层<div>添加key，优先用数据的唯一标识（比如Sanity文档自带的_id），避免用索引i（除非数据不会重新排序）。

修改后的关键代码片段：

{projects?.map((project, i) => (
  // 新增key属性，使用project的唯一ID
  <div key={project._id} className='w-screen flex-shrink-0 snap-center flex flex-col space-y-5 items-center justify-center p-20 md:p-44 h-screen'>
      <motion.img 
          initial={{ y: -300, opacity: 0 }}
          transition={{ duration: 1.2}}
          whileInView={{ opacity: 1, y: 0}}
          viewport={{ once: true}}
          src={urlFor(project?.image).url()} 
          alt={project.title} // 建议补充有意义的alt文本，提升可访问性
      />
      {/* 其余代码保持不变 */}
  </div>
))}

额外提示 #

1. 确保project._id是唯一且稳定的（Sanity的文档_id满足这个要求），如果你的Project类型里没有定义_id，需要在../typings的Project接口中补充该字段。
2. 给motion.img补充有意义的alt文本（比如project.title），既符合可访问性规范，也能避免其他潜在警告。

内容的提问来源于stack exchange，提问作者Syed Laeeq Ahmed