Next.js 与 Prisma 联用时渲染数据库列表出现 Hydration 错误的问题求助

各位大佬好！我最近在做一个Next.js项目，想用Prisma从数据库里获取所有职位列表数据并渲染展示，但一直碰到Hydration错误，具体报错信息如下：

Error: Hydration failed because the initial UI does not match what was rendered on the server.

我尝试在组件和外层div上都加了suppressHydrationWarning属性，但完全没效果，实在搞不懂问题出在哪，想请教下大家这个错误的原因是什么，以及该怎么修复？

附上我的组件代码：

import prismadb from "@/lib/prisma";

const ListingsPage = async () => {

const listings = await prismadb.jobListing.findMany();

return (

<div

className="grid  lg:grid-cols-2 gap-3 md:grid-cols-2 grid-cols-1 px-4 "

suppressHydrationWarning

>

{listings.map(async (listing: any, index) => (

<div className="m-5" key={index}>

<div

suppressHydrationWarning

className="group mx-2 mt-10 grid max-w-screen-md grid-cols-12 space-x-8 overflow-hidden rounded-lg border py-8 text-gray-700 shadow transition hover:shadow-lg sm:mx-auto"

>

<a

href="#"

className="order-2 col-span-1 mt-4 -ml-14 text-left text-gray-600 hover:text-gray-700 sm:-order-1 sm:ml-4"

>

<div className="group relative h-16 w-16 overflow-hidden rounded-lg">

<img

src={listing.companyLogoSrc}

alt=""

className="h-full w-full object-cover text-gray-700"

/>

</div>

</a>

<div className="col-span-11 flex flex-col pr-8 text-left sm:pl-4">

<h3 className="text-sm text-gray-600">{listing.companyName}</h3>

<a

href="#"

className="mb-3 overflow-hidden pr-7 text-lg font-semibold sm:text-xl"

>

{" " + listing.PositionName + " "}

</a>

<p className="overflow-hidden pr-7 text-sm">

{listing.PositionDescription}

</p>

<div className="mt-5 flex flex-col space-y-3 text-sm font-medium text-gray-500 sm:flex-row sm:items-center sm:space-y-0 sm:space-x-2">

<div>

Experience:

<span className="ml-2 mr-3 rounded-full bg-green-100 px-2 py-0.5 text-green-900">

{" "}

2 Years{" "}

</span>

</div>

<div>

Salary:

<span className="ml-2 mr-3 rounded-full bg-blue-100 px-2 py-0.5 text-blue-900">

{listing.Salary}

</span>

</div>

</div>

</div>

</div>

</div>

))}

</div>

);

};

export default ListingsPage;

备注：内容来源于stack exchange，提问作者Haris Mladenov