Firebase注册成功后调用set()写入实时数据库失败问题排查

核心原因是页面跳转中断了异步数据库写入操作：

• writeUserData 中的 set 方法是异步执行的，你在调用 writeUserData 后立刻执行了 window.location.href = accountredirect，浏览器会直接终止当前页面的所有未完成网络请求，导致数据库写入请求还没来得及完成就被取消。
• 单独调用 writeUserData 时没有页面跳转，异步请求能完整执行，所以可以正常写入。

修复方案 #

必须确保数据库写入完成后再执行页面跳转，以下是两种常用实现方式：

方式1：通过Promise链式调用控制执行顺序 #

修改registerbtn函数，将跳转逻辑放到writeUserData的成功回调链中：

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

    createUserWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
            const user = userCredential.user;
            const provider = "local";
            getUserDetails(user);
            saveUserdetails(user, provider);
            window.alert(email + password);
            
            // 返回writeUserData的Promise，让后续then等待写入完成
            return writeUserData(user);
        })
        .then(() => {
            // 数据库写入完成后再跳转
            window.location.href = accountredirect;
        })
        .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            console.log(errorMessage + errorCode);
            document.getElementById('error-text').innerHTML = errorCode;
        });
}

同时需要让writeUserData返回Promise：

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

    const db = getDatabase();
    // 返回set方法的Promise，供上层链式调用
    return 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);
        // 抛出错误让上层catch捕获
        throw error;
    });
}

方式2：用async/await简化异步流程 #

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

    try {
        const userCredential = await createUserWithEmailAndPassword(auth, email, password);
        const user = userCredential.user;
        const provider = "local";
        getUserDetails(user);
        saveUserdetails(user, provider);
        window.alert(email + password);
        
        // 等待数据库写入操作完成
        await writeUserData(user);
        
        // 写入完成后执行跳转
        window.location.href = accountredirect;
    } catch (error) {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log(errorMessage + errorCode);
        document.getElementById('error-text').innerHTML = errorCode;
    }
}

此方式同样需要writeUserData返回Promise（与方式1中的修改一致）。

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