Blazor WASM中如何导入JS以使用Firebase Auth？

问题根源 #

出现ReferenceError: GoogleAuthProvider is not defined通常是三个原因：Firebase模块加载顺序错误、未正确引用Firebase命名空间、Firebase初始化完成前就执行了自定义JS代码。

具体解决方案 #

1. 确保Firebase模块与自定义JS的加载顺序

在index.html中，必须先加载Firebase核心模块并完成初始化，再加载你的自定义JS文件：

<!-- 先加载Firebase核心及Auth模块 -->
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-auth.js"></script>

<!-- 初始化Firebase -->
<script>
  const firebaseConfig = {
    apiKey: "你的API_KEY",
    authDomain: "你的AUTH_DOMAIN",
    // 其他配置项
  };
  // 必须先初始化Firebase
  firebase.initializeApp(firebaseConfig);
</script>

<!-- 最后加载自定义JS文件 -->
<script src="VikingJS.js"></script>

2. 正确引用Firebase命名空间

GoogleAuthProvider属于firebase.auth命名空间，不能直接裸用，必须完整调用：

// VikingJS.js 示例代码
window.signInWithGoogle = function() {
  // 完整引用命名空间
  const provider = new firebase.auth.GoogleAuthProvider();
  firebase.auth().signInWithPopup(provider)
    .then(result => {
      // 处理登录成功逻辑
      console.log("登录用户：", result.user);
    })
    .catch(error => {
      console.error("登录失败：", error);
    });
};

3. 适配Firebase v9+模块化API（如果使用新版本）

如果你的Firebase是v9及以上的模块化版本，需要先导入对应方法再使用：

// VikingJS.js 模块化写法
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js";
import { getAuth, GoogleAuthProvider, signInWithPopup } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-auth.js";

const firebaseConfig = {
  // 你的配置项
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

window.signInWithGoogle = function() {
  const provider = new GoogleAuthProvider();
  signInWithPopup(auth, provider)
    .then(result => {
      console.log("登录用户：", result.user);
    })
    .catch(error => {
      console.error("登录失败：", error);
    });
};

4. 确保Blazor JSInterop调用时机正确

不要在组件初始化阶段直接调用JS方法，要等到Firebase和自定义JS都加载完成，推荐在OnAfterRenderAsync中执行：

@inject IJSRuntime JS

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 首次渲染完成后调用JS方法
            await JS.InvokeVoidAsync("signInWithGoogle");
        }
    }
}

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