Firebase Auth高版本CDN适配问题：WordPress插件报错求助

问题场景 #

开发自定义WordPress插件实现Firebase OTP验证，使用Firebase CDN 8.10.0版本时功能正常，但升级至10.7.2等v8.10.0之后的版本时，控制台出现以下报错：

• Uncaught SyntaxError: Cannot use import statement outside a module (at firebase-auth.js:1:1)
• Uncaught ReferenceError: firebase is not defined
• Uncaught SyntaxError: Unexpected token 'export' (at firebase-app.js:2539:1)

原因分析 #

Firebase JS SDK从v9版本开始全面切换为ESM模块化架构，而v8及更早版本采用的是全局命名空间的传统写法。直接加载v9+的标准CDN文件时，脚本中的import/export语法在WordPress默认的非模块脚本环境下无法被解析，导致上述语法错误。

解决方案 #

方案1：使用Firebase兼容版CDN（快速适配，保留原有代码） #

Firebase为兼容旧代码提供了compat分支的CDN文件，延续了v8的全局命名空间写法，无需大幅修改原有代码：

修改插件中的initializeFirebase方法，将CDN链接替换为兼容版：

private function initializeFirebase() {
    $firebaseVersion = '10.7.2'; // 可替换为目标v9+版本
    
    // 加载兼容版Firebase脚本
    wp_enqueue_script('firebase-app', "https://www.gstatic.com/firebasejs/{$firebaseVersion}/firebase-app-compat.js", array(), null, true);
    wp_enqueue_script('firebase-auth', "https://www.gstatic.com/firebasejs/{$firebaseVersion}/firebase-auth-compat.js", array('firebase-app'), null, true);

    wp_add_inline_script('firebase-app', 'var firebaseConfig = ' . json_encode($this->firebaseConfig) . '; firebase.initializeApp(firebaseConfig);', 'after');
}

原有前端JS代码无需修改，firebase全局对象仍可正常使用。

方案2：适配ESM模块化写法（推荐长期方案） #

如果想使用v9+的原生模块化特性，需要修改脚本加载方式和JS代码：

1. 修改PHP中的脚本加载逻辑，添加type="module"属性：

private function initializeFirebase() {
    $firebaseVersion = '10.7.2';
    
    // 加载ESM模块版本的Firebase脚本
    wp_enqueue_script('firebase-app', "https://www.gstatic.com/firebasejs/{$firebaseVersion}/firebase-app.js", array(), null, true);
    wp_enqueue_script('firebase-auth', "https://www.gstatic.com/firebasejs/{$firebaseVersion}/firebase-auth.js", array('firebase-app'), null, true);
    
    // 为脚本添加module类型
    add_filter('script_loader_tag', function($tag, $handle) {
        if (in_array($handle, array('firebase-app', 'firebase-auth'))) {
            return str_replace('src=', 'type="module" src=', $tag);
        }
        return $tag;
    }, 10, 2);
}

2. 修改前端JS代码为模块化导入写法：

<script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.2/firebase-app.js";
    import { getAuth, RecaptchaVerifier, signInWithPhoneNumber } from "https://www.gstatic.com/firebasejs/10.7.2/firebase-auth.js";
    
    const firebaseConfig = <?php echo json_encode($this->firebaseConfig); ?>;
    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app);

    window.sendOTP = function() {
        const phoneNumber = document.getElementById("phoneNumber").value;
        const appVerifier = new RecaptchaVerifier(auth, "recaptcha-container", {});

        signInWithPhoneNumber(auth, phoneNumber, appVerifier)
            .then((confirmationResult) => {
                window.confirmationResult = confirmationResult;
            })
            .catch((error) => {
                console.error("Error sending OTP: ", error);
            });
    }

    window.verifyOTP = function() {
        const verificationCode = document.getElementById("verificationCode").value;
        confirmationResult.confirm(verificationCode)
            .then((result) => {
                console.log("User signed in: ", result.user);
            })
            .catch((error) => {
                console.error("Error verifying OTP: ", error);
            });
    }
</script>

注意：模块化写法中需要将sendOTP和verifyOTP挂载到window对象，否则HTML中的onclick无法调用。

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