提交/接收API数据时TypeScript/Prisma数据类型异常问题

这是Next.js服务端组件向客户端组件传递数据时的序列化行为导致的，和MySQL、Prisma的存储逻辑无关，核心原因是Buffer对象的JSON序列化特性：

为什么会出现类型不一致？ #

• 服务端组件中查询到的image是Node.js原生Buffer对象，但当你把它作为Props传递给客户端组件时，Next.js会自动将所有跨环境传递的数据序列化为JSON格式。
• Node.js的Buffer对象默认的toJSON()方法会将自身转换为{type: 'Buffer', data: [...]}结构，这就是你在客户端组件中看到的对象格式。
• 上传时没有这个问题，是因为API路由的操作全程在服务端完成，Buffer直接传递给Prisma写入数据库，没有触发跨环境的序列化步骤。

可行的解决方案 #

1. 服务端提前转成Base64字符串传递 #

在服务端组件中将Buffer转为Base64字符串，客户端直接用这个字符串生成图片源，这是最常用的方案：

// 服务端组件 Categories.tsx
import { prisma } from '@/lib/prisma';
import LoadImage from './LoadImage';

export default async function Categories() {
  const categories = await prisma.productCategory.findMany();
  return (
    <div>
      {categories.map(cat => (
        <LoadImage 
          key={cat.id}
          imageBase64={cat.image.toString('base64')}
          alt={cat.name}
        />
      ))}
    </div>
  );
}

// 客户端组件 LoadImage.tsx
'use client';
export default function LoadImage({ imageBase64, alt }: { imageBase64: string; alt: string }) {
  return <img src={`data:image/png;base64,${imageBase64}`} alt={alt} />;
}

2. 客户端将序列化对象转回Buffer #

如果需要在客户端对Buffer做进一步处理，可以把序列化后的data数组转回Buffer：

// 客户端组件 LoadImage.tsx
'use client';
export default function LoadImage({ image }: { image: { type: 'Buffer'; data: number[] } }) {
  const buffer = Buffer.from(image.data);
  const base64 = buffer.toString('base64');
  return <img src={`data:image/png;base64,${base64}`} alt="分类图片" />;
}

3. 保留你的临时方案（传ID重新查询） #

这种方式适合图片体积较大的场景，避免Base64字符串过大导致的性能问题，缺点是会多一次服务端请求。

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