Next JS+Prisma开发报TypeError: posts.map is not a function如何解决？

你调用的Prisma findFirst 方法，匹配到记录时返回单个对象，未匹配到记录时返回null，这两种类型都没有数组专属的map方法，因此触发TypeError: posts.map is not a function报错。

根据你的业务需求二选一即可：

• 场景1：仅需查询指定ID的单条数据，无需遍历
  直接删除组件中的map遍历逻辑，补充空值兜底判断即可，修改后的组件代码如下：

  export default function Details({posts}) {
    // 未查询到数据时的兜底展示
    if (!posts) return <div>暂无对应记录</div>
    return (
      <div>
        <div key={posts.id}>
          {posts.id} {posts.text}
        </div>
      </div>
    )
  }
  

• 场景2：需要查询多条数据进行遍历展示
  将getServerSideProps中的Prisma查询方法替换为返回数组的findMany，可根据需求调整查询条件，示例代码如下：

  export async function getServerSideProps(context) {
    // 示例：查询所有contact记录，可自行调整where条件筛选符合要求的多条数据
    const data = await prisma.contact.findMany()
    return{
      props:{
        posts:data,
      }
    }
  }
  

不要在组件全局作用域初始化PrismaClient，该实例仅能在服务端运行，当前写法会导致Prisma相关代码被打包到前端资源中引发异常。可以将实例初始化逻辑移至getServerSideProps内部，或者单独封装仅在服务端引入的Prisma工具文件，避免重复实例化。

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