Next.js 13中使用Prisma映射数据表触发Hydration Error求助

1. 修正PrismaClient实例化方式 #

当前代码每次渲染Events组件都会新建PrismaClient实例，重复实例化可能引发数据查询异常，进而导致Hydration不匹配。建议创建单例实例：

在项目中新建lib/prisma.js文件：

import { PrismaClient } from '@prisma/client'

// 全局缓存Prisma实例，避免重复创建
const prisma = global.prisma || new PrismaClient()

if (process.env.NODE_ENV !== 'production') global.prisma = prisma

export default prisma

然后在Events组件中导入该单例：

import prisma from '@/lib/prisma'

export default async function Events() {
  const issues = await prisma.event.findMany();
  // ... 其余代码不变
}

2. 替换数组index为唯一标识作为key #

代码中使用数组下标key={key}作为React元素key，当数组元素顺序变化或增删时，会导致React渲染逻辑异常，触发Hydration错误。建议使用event表的唯一字段（如id）作为key：

{issues.map((issue) => (
  <tr key={issue.id}>
    <td>{issue.title}</td>
    <td>{issue.description}</td>
    <td>{issue.code}</td>
  </tr>
))}

3. 排查服务器与客户端渲染内容一致性 #

Hydration Error的核心原因是服务器渲染的HTML与客户端Hydrate生成的DOM结构不匹配，需确认：

• 确保event表数据在服务器查询结果稳定，无动态变化导致前后渲染内容差异
• 服务器组件中未使用客户端专属API（如window、document），你的代码中不存在此类问题

4. 临时排查：切换为客户端组件渲染 #

若以上方案无效，可临时将Events改为客户端组件，通过客户端数据请求验证问题是否来自服务器组件逻辑：

'use client'
import { useEffect, useState } from 'react'
import prisma from '@/lib/prisma'

export default function Events() {
  const [issues, setIssues] = useState([])

  useEffect(() => {
    const fetchEvents = async () => {
      const data = await prisma.event.findMany()
      setIssues(data)
    }
    fetchEvents()
  }, [])

  // ... 其余渲染代码不变
}

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