Drizzle ORM 与 Next.js 服务端组件的数据传输问题解析

在使用 Drizzle ORM 与 Next.js 服务端组件进行交互时，开发者可能会遇到一个典型错误："Only plain objects can be passed to Client Components"。这个问题源于服务端组件向客户端组件传递了包含非序列化对象的数据结构。

问题本质

当通过 Next.js 的 Server Action 执行 Drizzle ORM 的删除操作时，返回的数据库响应对象中包含了特殊的 _types 属性，这个属性携带了数据库驱动相关的函数（如 getTypeParser 和 setTypeParser）。这些函数无法被 Next.js 的序列化机制正确处理，因为它们属于非普通对象（non-plain objects）。

技术背景

Next.js 的服务端组件与客户端组件之间的数据传递需要遵循严格的序列化规则：

1. 只允许传递普通对象（plain objects）
2. 禁止传递包含函数的对象
3. 禁止传递具有 null 原型的对象

Drizzle ORM 与 Neon 数据库驱动返回的响应对象中，包含了数据库类型处理相关的内部方法，这违反了上述规则。

解决方案

方案一：避免返回查询结果

如果操作不需要返回结果，最简单的解决方案是移除 return 语句：

export async function deleteAction(id: string) {
  await db.delete(table).where(eq(table.id, id));
  // 不返回任何内容
}

方案二：使用 returning() 方法

Drizzle ORM 提供了 returning() 方法，可以返回经过处理的数据：

export async function deleteAction(id: string) {
  return db.delete(table)
    .where(eq(table.id, id))
    .returning(); // 返回处理后的数据
}

方案三：手动清理响应对象

对于需要自定义返回内容的情况，可以手动移除问题属性：

export async function deleteAction(id: string) {
  const result = await db.delete(table).where(eq(table.id, id));
  const { _types, ...cleanResult } = result;
  return cleanResult;
}

最佳实践建议

1. 在不需要操作结果时，优先使用无返回的设计
2. 对于需要返回数据的场景，尽量使用 Drizzle ORM 提供的内置方法
3. 避免直接暴露数据库驱动的内部对象
4. 考虑使用 TypeScript 类型断言确保返回类型安全

扩展思考

这个问题不仅限于删除操作，任何可能返回数据库驱动内部对象的操作都需要注意。开发者应该理解框架间的数据流动规则，特别是在全栈应用中，服务端和客户端的数据边界需要特别关注。

通过合理设计数据交互接口，可以避免这类序列化问题，同时保证应用的安全性和性能。