Flutter Web出现TypeError: 无法读取undefined的'firestore'属性

排查方向1：严格控制Firebase初始化顺序 #

Flutter Web中Firebase初始化必须在App启动前完成，且Firestore相关操作要等初始化彻底结束后再执行。

• 确保main()函数的执行顺序正确：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 先完成Firebase核心初始化
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  // 再配置模拟器连接
  if (kIsWeb) {
    FirebaseFirestore.instance.useFirestoreEmulator('localhost', 8080);
  }
  runApp(const MyApp());
}

• 禁止在initState()等Widget生命周期中提前调用Firestore，除非能确认Firebase初始化已经完成。

排查方向2：检查Web端Firebase JS SDK配置 #

Flutter Web依赖web/index.html中的JS SDK，配置缺失或版本不匹配会直接导致Firestore实例未定义。

• 打开web/index.html，确认已正确引入对应版本的Firebase JS SDK，且配置信息完整：

<!-- 在body标签末尾添加 -->
<script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/11.8.0/firebase-app.js";
  import { getFirestore } from "https://www.gstatic.com/firebasejs/11.8.0/firebase-firestore.js";
  const firebaseConfig = {
    apiKey: "你的API_KEY",
    authDomain: "你的AUTH_DOMAIN",
    projectId: "你的PROJECT_ID",
    storageBucket: "你的STORAGE_BUCKET",
    messagingSenderId: "你的SENDER_ID",
    appId: "你的APP_ID"
  };
  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);
</script>

• 注意：JS SDK版本必须与pubspec.yaml中Firebase Dart包的版本对应，避免版本不兼容导致的实例加载失败。

排查方向3：校验模拟器连接代码 #

• 确认Firestore模拟器的端口与代码中一致：默认端口是8080，启动模拟器时控制台会显示实际端口，要保证代码中的端口和控制台输出一致。
• 若同时使用其他Firebase服务模拟器，需确保各自的连接代码正确，避免相互干扰：

if (kIsWeb) {
  FirebaseAuth.instance.useAuthEmulator('localhost', 9099);
  FirebaseFirestore.instance.useFirestoreEmulator('localhost', 8080);
}

排查方向4：清理缓存并重建项目 #

降级依赖后可能存在缓存残留，执行以下步骤彻底重置：

• 清理Flutter缓存：flutter clean
• 删除项目根目录下的pubspec.lock文件
• 重新拉取依赖：flutter pub get
• 重新构建Web项目：flutter build web
• 运行时指定端口避免缓存冲突：flutter run -d chrome --web-port=5000

排查方向5：确认Firebase项目基础配置 #

• 确保Firebase控制台中你的项目已启用Firestore服务，即使使用模拟器，项目本身也需要先开启该服务。
• 检查firebase.json中的模拟器配置，确认Firestore模拟器已正确启用：

{
  "emulators": {
    "firestore": {
      "port": 8080
    }
  }
}

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