在创建用户时将数据写入 Firestore 不起作用答案

【问题标题】：Writing data to Firestore on create user not working在创建用户时将数据写入 Firestore 不起作用
【发布时间】：2021-10-18 02:16:31
【问题描述】：

我正在使用 VueCLI 和 Firebase（Auth 和 Firestore）。

基本上该函数被正确调用并在数据库中正确注册用户，但是，在 .createUserWithEmailAndPassword 函数上没有调用承诺（例如 .then 和 .catch）。

没有返回任何错误，也没有在 firestore 中注册任何内容，真的让我很难过。

但是，有时它会完全按预期工作？但经常不规律。

submit () {
  var v = this

  firebase.auth().createUserWithEmailAndPassword(v.form.email, v.form.password)
    .then(function () {
      // set account  doc
      var account = {
        email: v.form.email,
        name: v.form.name,
        picture: v.form.picture
      }
      db.collection('Users').doc(v.form.email).set(account).then(() => {
        console.log('Database Details Defined')
        // Set user display name
        v.$store.commit('setUserDisplayName', v.form.name)
        // Set user display name
        v.$store.commit('setUserImage', v.form.picture)
        // Set user as signed in
        v.$store.commit('changeLoginState', true)
        // Set user email
        v.$store.commit('setUserEmail', v.form.email)

        // console.log('Vue Store Details Defined')

        localStorage.setItem('name', v.$store.state.displayName)
        localStorage.setItem('email', v.$store.state.email)
        localStorage.setItem('userImage', v.$store.state.userImage)
        localStorage.setItem('loggedin', v.$store.state.isLoggedin)

        // console.log('Local Storage Details Defined')

        // Redirect user to dashboard
        v.$router.replace('/')
        v.registering = false
      }).catch((error) => {
        v.databaseError = 'Database Error: ' + error.code + ' - ' + error.message
        v.registering = false
      })
    })
    .catch(function (error) {
      v.registrationError = 'Registration Error: ' + error.code + ' - ' + error.message
      v.registering = false
    })
}

【问题讨论】：

您能否在submit() 函数中添加console.log("Creating user") 并检查该函数是否实际运行？提交时页面是否刷新，因为这是表单的预期行为？
奇怪！添加了它，它仍然在 Firebase 中注册了用户，但没有调用之前出现的控制台日志 - HTML 不是 <form> 它只是 <div>
尝试重启服务器。也许它仍然运行旧代码？
好的，这样做可以调用日志 - 否则结果相同
如果你 console.log(account) 在 set() 语句之前同样地，它是否会按预期记录所有值？另外，您能否保持浏览器中的网络选项卡处于打开状态并检查是否有任何请求向 Firestore 发出？

标签： javascript firebase vue.js google-cloud-firestore firebase-authentication

【解决方案1】：

您有一个函数 getDB() 返回 Firestore 实例的值，因此 getDB().collection("users")... 可能已按预期工作。我没有看到 db 在这个特定文件中的初始化位置，所以 console.log(db) 可能有助于检查它的值。

firebase.firestore().collection('Users').doc(v.form.email).set(account)

这按预期工作，因为firebase.firestore() 肯定会返回 Firestore 实例。我建议直接导出 Firebase 服务，而不是在函数中。例如，您可以创建一个文件 firebase.js 并在那里初始化 Firebase：

var firebase = require('firebase/app')
require('firebase/firestore')

const firebaseConfig = { }

if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

const auth = firebase.auth()
const db = firebase.firestore()

export {db, auth}

您只需要初始化一次 Firebase，如图所示。它会比在getDB 函数中初始化要清晰得多。

【讨论】：