Vue集成Firestore无法向users集合写入数据且控制台无报错

• SDK混用错误：同时使用Firebase v9 模块化API和旧版命名空间API，导入语句无效，实际拿到的Firestore集合引用为undefined，且未捕获异步操作错误，导致控制台无明确报错。
• 异步逻辑时序错误：Firestore的add()是异步Promise操作，未等待写入完成就跳转路由，页面提前卸载导致写入请求中断。
• 错误捕获缺失：未对Firestore写入操作添加异常捕获，权限不足、参数错误等问题无法触发报错提示。

1. 修正Firebase初始化配置 #

替换Firebase.js原有代码，统一使用v9模块化语法：

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getAuth } from "firebase/auth";
import { getFirestore, collection } from "firebase/firestore"; 

const firebaseConfig = {
  apiKey: "AIzaSyDip-bxxBA459wQ6Nx0vAp_vFrEmlWOACk",
  authDomain: "mystore-3f6bf.firebaseapp.com",
  projectId: "mystore-3f6bf",
  storageBucket: "mystore-3f6bf.appspot.com",
  messagingSenderId: "139527527392",
  appId: "1:139527527392:web:3de39212b280729c846985",
  measurementId: "G-7S411KB5ZK"
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const auth = getAuth(app);
const db = getFirestore(app);
// 获取users集合引用
const usersColRef = collection(db, "users");

export { auth, db, usersColRef };
export default { app, analytics };

2. 修正注册页写入逻辑 #

修改SignupView组件的script部分，正确导入Firestore写入方法，等待异步写入完成后再跳转，补充错误捕获：

<script>
import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth'
import router from "../router"
import { usersColRef } from "../Firebase";
import { addDoc } from "firebase/firestore";

export default {
  name:'SignupView',
  data(){
    return{
      user:{
        name:'',
        email:'',
        password:'',
        uid:''
      },
      errMsg: ''
    }
  },
  methods: {
    registerUser(){
      const auth = getAuth();
      createUserWithEmailAndPassword(auth, this.user.email, this.user.password)
        .then(async (datauser)=>{
          // 等待数据写入完成
          await addDoc(usersColRef, {
            name: this.user.name,
            email: this.user.email,
            uid: datauser.user.uid,
          })
          // 写入成功后再跳转页面
          router.push({
            name:'home'
          })
        }).catch((error) => {
          console.log(error)
          switch (error.code) {
            case "auth/invalid-email":
              this.errMsg = "邮箱格式无效";
              break;
            case "auth/weak-password":
              this.errMsg = "密码强度过低";
              break;
            case "auth/email-already-in-use":
              this.errMsg = "该邮箱已被注册";
              break;
            case "permission-denied":
              this.errMsg = "数据库写入权限不足，请检查Firestore安全规则";
              break;
            default:
              this.errMsg = error.message;
          }
        })
    }
  },
}
</script>

3. 配置Firestore安全规则 #

Firebase默认安全规则禁止所有客户端写入，测试阶段可在Firebase控制台将规则修改为仅登录用户可读写（上线前需根据业务调整更严格的规则，避免数据泄露）：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

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