为什么我的函数没有将数据写入我的 firebase 实时数据库

Question

Firebase createUserWithEmailAndPassword 可以工作，但 set() 到实时数据库失败 我有一个 Firebase 项目，需要使用 Firebase 身份验证注册用户，然后立即将用户的数据写入 Firebase 实时数据库。

这是我的注册函数的结构：

export function registerbtn(register, emailinput, passwordinput) {
    register.preventDefault();
    console.log(passwordinput, emailinput);
    const email = emailinput.value;
    const password = passwordinput.value;

    createUserWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
            // Signed up
            const user = userCredential.user;
            writeUserData(user);  // Writing user data to Firebase DB
            const provider = "local";
            getUserDetails(user);
            saveUserdetails(user, provider);

            window.alert(email + password);
            window.location.href = accountredirect;
            return user;

        })
        .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            console.log(errorMessage + errorCode);
            document.getElementById('error-text').innerHTML = errorCode;
        });
}

我还有一个 writeUserData 函数，可将新注册的用户数据写入 Firebase 实时数据库：

function writeUserData(user) {
    const userId = user.uid;
    const info = "value";

    // Update the user's data in the database
    const db = getDatabase();
    set(ref(db, 'users/' + userId), {
        username: info,
        email: info,
        profile_picture: info
    })
    .then(() => {
        console.log("User data updated successfully!");
    })
    .catch((error) => {
        console.error("Error updating user data: ", error);
    });
}

问题： 除 writeUserData 函数外，registerbtn 函数内的所有内容都工作正常。它不会写入数据库，并且控制台日志未显示与 Firebase 数据库相关的错误。但是，如果我单独或在注册过程之外调用 writeUserData 函数，它会完美运行并将数据写入 Firebase。

我尝试将 writeUserData 函数放在 .then() 块内部和外部，甚至导出/导入它，但问题仍然存在。

我的 Firebase 配置：

import {
    initializeApp
} from "https://www.gstatic.com/firebasejs/10.13.0/firebase-app.js";


import {
    getAuth, signOut, signInWithEmailAndPassword, signInWithPopup, GoogleAuthProvider, createUserWithEmailAndPassword, onAuthStateChanged
} from "https://www.gstatic.com/firebasejs/10.13.0/firebase-auth.js";


import {
    getAnalytics
} from "https://www.gstatic.com/firebasejs/10.13.0/firebase-analytics.js";


import {
    getDatabase, onValue, child, ref, set, get
} from "https://www.gstatic.com/firebasejs/10.13.0/firebase-database.js";


// TODO: Add SDKs for Firebase products that you want to use

// https://firebase.google.com/docs/web/setup#available-libraries


// Your web app's Firebase configuration

// For Firebase JS SDK v7.20.0 and later, measurementId is optional

const firebaseConfig = {

    apiKey: "AIza**************",

    authDomain: "wespot-website.firebaseapp.com",

    databaseURL: "https://wespot-website-default-rtdb.europe-west1.firebasedatabase.app",

    projectId: "wespot-website",

    storageBucket: "wespot-website.appspot.com",

    messagingSenderId: "864768589048",

    appId: "1:864768589048:web:f76790c9abfa6b2e594f0d",

    measurementId: "G-0ZD710W4YE"

};


// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const database = getDatabase();
const auth = getAuth();
export const provider = new GoogleAuthProvider();
const accountredirect = "../index.html";

我尝试过的步骤： 记录用户对象：为了确保填充用户对象，我添加了控制台日志，它显示了正确的用户 UID。

Firebase 规则：我已检查我的 Firebase 实时数据库规则并确保它们允许经过身份验证的用户进行写入。

Firebase 身份验证工作正常并且用户已成功创建。 仅当用户注册后立即调用 writeUserData 函数时，数据库写入才会失败。 控制台中没有错误，因此很难追踪问题。 问题： 为什么在 createUserWithEmailAndPassword 之后调用 writeUserData(user) 时失败，但单独调用时却工作得很好？可能是时间问题，还是我错过了什么？

任何帮助或见解将不胜感激！

Answer 1

在数据库写入完成之前，您的代码正在离开页面：

            window.location.href = accountredirect;

离开页面会停止该页面上所有正在运行的代码，并且您的数据库写入将被有效取消。

您应该做的是等待

set()

返回的承诺在重定向之前得到解决。这意味着您的函数

writeUserData

可能应该返回一个承诺，并让调用代码处理它而不是在函数内部。