vue.js - 在 Vue 3 中登录/检索文档 Firebase 后路由到不同页面时出错

Question

我使用 Vuex 4 和 Firebase 开始了一个新的 Vue 3 项目。我想尝试 Firebase 和 Vue 3（还没有使用 composition-api），但我想我一定是在某个地方遗漏了一些东西。

我正在通过 Firebase 电子邮件/密码身份验证处理注册/输入/退出表单，但是在登录和检索用户详细信息时，我一直遇到一个错误，该错误会破坏导航到不同的页面。起初我认为这与 Vuex 4 有关，但是当将代码作为常规方法移动到登录组件时，我得到了同样的错误（完全跳过 Vuex 来测试这个）。

登录实际上有效（我获取了用户数据）并检索了配置文件数据也有效，但是一旦我尝试重定向，我就会收到此错误：

 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App> build.umd.js:2420

Uncaught (in promise) TypeError: parent is null - runtime-dom.esm-bundler.js:11

登录方式：

        login() {
            // this.$store.dispatch('login', {
            //     email:    this.loginForm.email,
            //     password: this.loginForm.password
            // }).then(() => this.$router.push('/dashboard'))

            fb.auth.signInWithEmailAndPassword(this.loginForm.email, this.loginForm.password)
                .then((userCredential) => {
                    const user = userCredential.user;
                    if (user && user.uid) {

                        const ref = fb.usersCollection.doc(user.uid);
                        ref.get().then((doc) => {
                            if (doc.exists) {
                                // TODO save in vuex store
                                console.log(doc.data());
                                this.$router.push('/')
                            } else {
                                alert("No such document!");
                            }
                        });

                    }
                })
                .catch((error) => {
                    alert(error.message);
                });
        },

当我离开this.$router.push('/')（并doc.data()包含我需要的数据）时不会发生错误，但我需要在登录后将用户重定向到他的仪表板。

有谁知道如何解决这个问题？一定是我忽略的简单事情。

我在组件 ( ) 中导入以下文件import * as fb from "@/firebase";：

/* eslint-disable */
import firebase from 'firebase/app';
import 'firebase/auth'
import 'firebase/firestore'

// firebase init
const firebaseConfig = {
    apiKey:            "X",
    authDomain:        "X.firebaseapp.com",
    projectId:         "X",
    storageBucket:     "X.appspot.com",
    messagingSenderId: "123",
    appId:             "X",
    measurementId:     "X"
}
firebase.initializeApp(firebaseConfig)

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

// collection references
const usersCollection    = db.collection('users')

// export utils/refs
export {
    db,
    auth,
    usersCollection,
}

由于 API 信用，不想在网上发布演示项目，但如果需要，请告诉我，我会看看我能做什么

标签： vue.jsvuejs3