Firebase模块懒（动态）导入触发解构报错，求正确导入方案

报错的核心原因是 firebase/auth v9+ 版本没有提供默认导出，你尝试访问返回模块的 .default 属性为undefined，才会触发解构失败的报错。

正确懒加载实现方式 #

1. 基础修复写法 #

直接去掉原代码中的 .default 即可，动态导入返回的模块对象本身就包含所有命名导出的API：

const { getAuth, signInWithPopup, GoogleAuthProvider } = await import('firebase/auth');

2. 业务场景使用示例（以点击触发登录为例） #

可以做到页面初始化时不加载auth模块，仅在用户触发登录操作时再异步加载，减少首屏资源体积：

// 提前初始化firebase基础实例
import { initializeApp } from "firebase/app";
const firebaseConfig = {
  // 替换为你的firebase项目配置
};
const app = initializeApp(firebaseConfig);

// 登录触发函数
async function handleGoogleLogin() {
  // 懒加载auth相关模块
  const { getAuth, signInWithPopup, GoogleAuthProvider } = await import('firebase/auth');
  const auth = getAuth(app);
  const provider = new GoogleAuthProvider();
  
  try {
    const userCredential = await signInWithPopup(auth, provider);
    // 登录成功后处理逻辑，比如获取用户信息、存储登录状态等
    const user = userCredential.user;
  } catch (error) {
    // 自定义登录报错处理逻辑
    console.error("登录失败：", error);
  }
}

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