webpack打包Firebase报this.chats.add is not a function错误

最新版Firebase（v9+）默认提供模块化可Tree-shaking API，和v8及更早版本的命名空间API用法不兼容：

• 旧版API中，集合/文档引用实例上会直接挂载add/get/set这类操作方法
• 新版模块化API中，所有操作方法都是独立导出的纯函数，不会挂载到引用实例上
  你的代码已经用新版API的collection()方法获取了集合引用，却调用了旧版才存在的实例方法.add()，因此触发类型错误。

推荐直接使用原生模块化API（配合webpack可按需打包，减小产物体积），操作步骤如下：

• 从firebase/firestore路径导入所有需要的方法，包括新增文档专用的addDoc
• 将原有this.chats.add(chat)的调用逻辑，替换为addDoc(this.chats, chat)

修复后的完整代码参考：

// 确保导入路径和本地Firebase初始化逻辑匹配
import { initializeApp } from "firebase/app";
import { getFirestore, collection, addDoc, Timestamp } from "firebase/firestore";
// 替换为你自己的Firebase项目配置
const firebaseConfig = {
  // 对应项目的配置参数
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

class Chatroom {
    constructor(room, username){
        this.room = room;
        this.username = username;
        this.chats = collection(db, 'chats');
    }
    async addChat(message){
        const now = new Date();
        const chat = {
            message,
            username: this.username,
            room: this.room,
            created_at: Timestamp.fromDate(now)
        };
        // 替换为独立函数调用
        const response = await addDoc(this.chats, chat);
        return response;
    }
}

const chatroom = new Chatroom('gaming', 'shaun');

chatroom.addChat('hello everyone')
    .then(() => console.log('chat added'))
    .catch(err => console.log(err));

如果你暂时不想修改现有业务代码的调用逻辑，也可以改用Firebase提供的兼容层包，把导入路径从firebase/firestore替换为firebase/firestore/compat即可兼容旧版API写法，但这种方式无法享受模块化打包的体积优化，webpack项目中不推荐使用。

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