Sveltekit集成Firebase UI Auth遇v8/v9兼容及signInSuccessWithAuthResult回调问题

根因分析 #

• 核心问题出在signInSuccessWithAuthResult回调的参数传递错误：该回调返回的第一个参数是AuthResult封装对象，而非直接的Firebase User对象，直接传给需要User参数的handleSignedInUser方法，会导致user.phoneNumber读取失败，仅在首次刷新走onAuthStateChanged逻辑时正常，重登时走回调逻辑就会报错。
• 次要问题：FirebaseUI实例重复调用start方法未做状态判断，多次初始化UI实例会引发冲突报错。
• 额外隐患：Firebase App重复初始化，每次组件挂载都调用initializeApp会触发全局实例冲突。

修复步骤 #

1. 修正回调参数传递 #

将signInSuccessWithAuthResult回调中传入handleSignedInUser的参数修改为authResult.user即可：

signInSuccessWithAuthResult: function (authResult, redirectUrl) {
    handleSignedInUser(authResult.user); // 从AuthResult中取出user对象再传递
    return false;
},

2. 优化FirebaseUI实例初始化逻辑 #

调用ui.start前先判断实例状态，避免重复初始化：

const handleSignedOutUser = function () {
    console.log("handleSignedOutUser.... ");
    document.getElementById("user-signed-in").classList.add("hidden");
    document.getElementById("user-signed-out").classList.remove("hidden");
    // 先判断UI实例是否存在且未处于待跳转状态，避免重复初始化
    if (ui && !ui.isPendingRedirect()) {
        ui.start("#firebaseui-auth-container", uiConfig);
    }
};

3. 移除组件内重复的Firebase初始化逻辑 #

将firebase.initializeApp(firebaseConfig)逻辑迁移到$lib/firebaseInit.js中全局初始化，确保全局仅初始化一次，组件内直接导入已经初始化完成的firebase实例即可。

可选优化：替换原生DOM操作为Svelte响应式写法 #

无需手动操作DOM的class属性，用Svelte原生响应式变量控制元素显隐，避免DOM操作异常：

<script>
    // 新增响应式变量存储登录状态
    let user = null;
</script>

<div id="user-signed-in" class:hidden={!user}>
    <h3>Login Information</h3>
    <div id="user-info">
        <div>Phone number: {user?.phoneNumber}</div>
    </div>
    <!-- 其余按钮内容 -->
</div>
<div id="user-signed-out" class:hidden={user}>
    <h4>You are signed out. Please sign in.</h4>
</div>

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