Firebase Firestore 400错误：WebChannel传输异常问题求助

针对你遇到的Firestore写入400错误（Connection WebChannel transport errored），结合你的配置和代码，以下是几个常见原因及解决办法：

1. Firebase SDK版本过旧 #

你使用的8.0.0版本是2020年的旧版本，存在已知的WebChannel传输兼容性问题，后续版本已修复相关bug。

• 解决办法：升级到8.x系列的最新稳定版（比如8.10.0），替换页面中所有Firebase脚本的版本号：

  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
  

2. 网络或浏览器扩展拦截请求 #

广告拦截、隐私保护类浏览器扩展，或者本地防火墙可能会拦截Firestore的WebSocket/HTTP请求，导致传输错误。

• 解决办法：
  • 禁用浏览器所有扩展，切换到无痕模式测试
  • 更换网络环境（比如手机热点），排除本地防火墙限制
  • 检查浏览器控制台的Network标签，确认请求是否被拦截

3. Firestore初始化时未指定区域（或区域不匹配） #

如果你的Firestore数据库设置了特定区域，但代码中未指定，可能导致连接异常。

• 解决办法：在初始化Firestore时明确指定项目对应的区域（比如你的数据库区域是us-central1）：

  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  // 添加这行代码指定区域
  firebase.firestore().settings({ location: 'us-central1' });
  

4. Auth状态同步延迟 #

虽然onAuthStateChanged触发了用户登录状态，但用户的认证token可能尚未完全同步到Firestore请求中，导致权限验证失败。

• 解决办法：强制刷新用户token后再执行Firestore操作：

  firebase.auth().onAuthStateChanged(function(user) {
      if (!user) {
          console.log("No user is signed in.");
          window.location.href = '/login';
      } else {
          console.log("User is signed in:", user);
          // 强制刷新token，确保认证状态同步
          user.getIdToken(true).then(() => {
              const db = firebase.firestore();
              db.collection("test").add({
                  name: "Test",
                  time: new Date()
              })
              .then((docRef) => {
                  console.log("Document written with ID:", docRef.id);
              })
              .catch((error) => {
                  console.error("Error adding document:", error);
              });
          });
      }
  });
  

5. 浏览器缓存干扰 #

旧的SDK缓存或Firebase配置缓存可能导致连接异常。

• 解决办法：
  • 清除浏览器缓存（Ctrl+Shift+Del）
  • 强制刷新页面（Ctrl+Shift+R）

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