使用Firebase与Nuxt3服务端路由报错：i.consume is not a function

问题原因 #

这个错误是由于Firestore返回的数据中包含不可被JSON序列化的类型（比如Timestamp），Nitro在处理服务端路由响应时，无法正确序列化这些特殊类型，从而抛出异常。

解决方案 #

将Firestore返回的特殊类型（如Timestamp）转换为可序列化的格式（比如ISO字符串），确保响应能正常被序列化并返回给前端。

修改服务端路由代码 #

更新server/api/posts/all.ts，在获取文档数据时转换特殊类型：

import { firestore } from '@/server/utils/firebase';

// 序列化Firestore数据，转换Timestamp为ISO字符串
function serializeFirestoreData(data: any): any {
  if (!data) return data;
  const serialized = { ...data };
  for (const key in serialized) {
    // 判断是否为Firebase Timestamp类型
    if (serialized[key]?.toISOString) {
      serialized[key] = serialized[key].toISOString();
    } 
    // 递归处理嵌套对象
    else if (typeof serialized[key] === 'object') {
      serialized[key] = serializeFirestoreData(serialized[key]);
    }
  }
  return serialized;
}

export default defineEventHandler(async (event) => {
  const colRef = firestore.collection('posts').orderBy('createdAt', 'desc');
  const querySnapshot = await colRef.get();
  const posts = [];
  querySnapshot.forEach((doc) => {
    // 使用序列化函数处理文档数据
    posts.push(serializeFirestoreData(doc.data()));
  });
  return {
    posts,
  };
});

可选方案：使用Firebase Admin SDK #

如果你的服务端操作不需要和前端共享Firebase实例，推荐使用Firebase Admin SDK（更适合Node.js服务端环境），它返回的日期类型会直接是JavaScript Date对象，序列化更友好：

1. 安装Admin SDK：

npm install firebase-admin

2. 初始化Admin SDK（server/utils/firebase-admin.ts）：

import admin from 'firebase-admin';

if (!admin.apps.length) {
  admin.initializeApp({
    credential: admin.credential.cert({
      // 你的服务端密钥信息，注意不要暴露到前端
      projectId: process.env.FIREBASE_PROJECT_ID,
      clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
      privateKey: process.env.FIREBASE_PRIVATE_KEY?.replace(/\\n/g, '\n'),
    }),
  });
}

export const firestore = admin.firestore();

3. 修改服务端路由使用Admin SDK：

import { firestore } from '@/server/utils/firebase-admin';

export default defineEventHandler(async (event) => {
  const colRef = firestore.collection('posts').orderBy('createdAt', 'desc');
  const querySnapshot = await colRef.get();
  const posts = [];
  querySnapshot.forEach((doc) => {
    // Admin SDK返回的Date对象可直接序列化
    posts.push(doc.data());
  });
  return {
    posts,
  };
});

验证修改 #

修改完成后重启开发服务器，前端app.vue中的useFetch就能正常获取到数据，UI也会显示内容，控制台的错误会消失。

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