如何在Vue.js中向Firebase Firestore新增集合（Firebase 9.8.2）

你现有代码的问题是没有按照Firebase 9+ 模块化SDK的规范调用Firestore接口，dbItemAdd不是合法的SDK方法，以下是可直接运行的正确实现：

第一步：完成Firebase基础初始化 #

先确认项目中已完成Firebase应用、Auth、Firestore模块的初始化，初始化参考代码如下，路径一般为src/firebase.js：

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
// 必须导入Firestore模块
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  // 替换为你自己Firebase项目的配置参数
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

const app = initializeApp(firebaseConfig);
// 导出Auth实例
export const auth = getAuth(app);
// 导出Firestore实例
export const db = getFirestore(app);

第二步：修改注册方法逻辑 #

Firebase 9+ 新增集合/文档不需要提前手动创建集合，写入第一条数据时会自动生成对应集合。写入操作需要用到两个SDK方法：

• collection()：传入db实例和集合名，获取集合引用
• addDoc()：传入集合引用和待写入数据，完成文档新增
  注意所有Firebase操作都是异步逻辑，必须等待执行完成后再做路由跳转，同时要捕获写入阶段的错误

修改后的组件代码如下：

import { createUserWithEmailAndPassword } from "firebase/auth";
import { collection, addDoc } from "firebase/firestore";
import { auth, db } from "@/firebase.js";
import router from "@/router";

export default {
  data() {
    return {
      user: {
        name: "",
        email: "",
        password: ""
      },
      errMsg: ""
    }
  },
  methods: {
    async registerUser() {
      try {
        // 等待账号注册完成
        const userCred = await createUserWithEmailAndPassword(auth, this.user.email, this.user.password);
        // 指向users集合，不存在则自动创建
        const userColRef = collection(db, "users");
        // 等待用户数据写入完成
        await addDoc(userColRef, {
          name: this.user.name,
          email: this.user.email,
          uid: userCred.user.uid,
          createdAt: Date.now()
        });
        // 所有操作成功后跳转首页
        router.push({ name: "home" });
      } catch (error) {
        console.log(error.code);
        switch (error.code) {
          case "auth/invalid-email":
            this.errMsg = "Invalid email";
            break;
          case "auth/weak-password":
            this.errMsg = "Weak password, at least 6 characters";
            break;
          case "auth/email-already-in-use":
            this.errMsg = "Email has been registered";
            break;
          case "permission-denied":
            this.errMsg = "No permission to write data, check Firestore rules";
            break;
          default:
            this.errMsg = "Registration failed, please retry later";
        }
      }
    }
  }
}

关键注意点 #

• 不需要提前在Firebase控制台手动创建集合，首次写入数据时会自动创建
• 开发阶段如果遇到权限报错，先检查Firestore安全规则，测试阶段可临时放开权限，正式上线前必须配置权限校验规则，参考规则写法：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{docId} {
      allow read, write: if request.auth != null && request.auth.uid == request.resource.data.uid;
    }
  }
}

• 不要在异步操作未完成时提前跳转路由，否则会出现数据写入失败但页面已经跳转的问题，也无法捕获对应错误。

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