Firebase认证中.then((userCredential)=>{})回调不执行问题求助

核心问题分析 #

你能在Firebase认证面板看到新用户，说明createUserWithEmailAndPassword已成功完成，但.then回调未执行且无报错，最大可能是页面刷新打断了后续代码执行，其次是Promise链存在静默异常。

解决步骤 #

1. 阻止表单默认提交行为 #

如果submitData按钮在<form>标签内，点击会触发表单默认提交，页面立即刷新导致.then代码还没执行就被中断。在事件处理函数开头添加：

submitData.addEventListener('click', (e) => {
    // 阻止表单默认提交，避免页面刷新
    e.preventDefault(); 
    
    var name = document.getElementById('full_name').value
    var email = document.getElementById('email').value;
    var password = document.getElementById('psw').value;
    // ... 后续代码
})

2. 添加finally回调确认Promise状态 #

用.finally判断Promise是否完成，无论成功或失败都会触发，帮你确认代码执行链路：

createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
    const user = userCredential.user
    alert("user created")
})
.catch(function(error) {
    var error_code = error.code
    var error_message = error.message
    alert(error_message)
    alert('not working')
})
.finally(() => {
    console.log("Promise执行完成（成功/失败）");
    alert("Promise已结束");
})

3. 改用async/await写法调试 #

链式Promise的问题有时不易察觉，换成async/await更直观，也便于断点调试：

submitData.addEventListener('click', async (e) => {
    e.preventDefault();
    
    var name = document.getElementById('full_name').value
    var email = document.getElementById('email').value;
    var password = document.getElementById('psw').value;
    
    try {
        const userCredential = await createUserWithEmailAndPassword(auth, email, password);
        const user = userCredential.user;
        alert("user created");
        // 这里可直接添加写入数据库的逻辑
        await set(ref(database, 'users/' + user.uid), {
            full_name: name,
            email: email
        });
    } catch (error) {
        var error_code = error.code
        var error_message = error.message
        alert(error_message);
    }
})

4. 开启浏览器未捕获异常监控 #

打开Chrome控制台的Sources标签，勾选「Pause on uncaught exceptions」，即使有未被catch捕获的错误，也会暂停执行，帮你定位问题根源。

额外提示 #

如果要将用户信息写入Firebase Realtime Database，在.then或try块内添加写入逻辑即可：

// 在then回调内添加数据库写入
set(ref(database, 'users/' + user.uid), {
    full_name: name,
    email: email
})
.then(() => {
    alert("用户信息已写入数据库");
})
.catch(dbError => {
    console.error("写入数据库失败：", dbError);
})

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