Nuxt3中使用Firebase模块化SDK向Firestore添加文档时请求失败

可能的错误原因及排查步骤 #

• 初始化配置错误
  检查Firebase初始化的config对象，确保projectId、apiKey、authDomain等核心字段完全匹配Firebase控制台的项目配置。同时确认Firestore实例创建正确：

  import { initializeApp } from "firebase/app";
  import { getFirestore } from "firebase/firestore";
  
  const firebaseConfig = { /* 你的正确配置 */ };
  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app); // 确保这一步正确执行
  

• 网络或环境拦截
  "Fetch failed loading: GET"常由网络层面问题导致：

  • 禁用浏览器的广告拦截、隐私防护类插件，避免请求被拦截；
  • 切换网络环境（如手机热点），排查是否是本地网络防火墙限制；
  • 检查本地开发服务器是否存在CORS配置问题（Firebase默认支持CORS，但自定义代理可能引发异常）。

• 非生产模式权限规则验证
  虽然测试模式默认开放读写，但需确认规则未被修改：
  登录Firebase控制台 → Firestore数据库 → 规则页面，确认规则为：

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /{document=**} {
        allow read, write: if request.time < timestamp.date(2025, 12, 31);
      }
    }
  }
  

  若规则被修改，可能出现权限拒绝，且错误被网络请求失败提示掩盖。

• addDoc参数合法性检查

  • 确认第一个参数是正确的CollectionReference实例，比如通过collection(db, "attractions")创建，而非直接传入Firestore实例；
  • 检查待保存的文档数据：避免字段名包含.$[]#等Firestore禁止的字符，同时确保无循环引用的对象或不支持的数据类型。

新手必备调试技巧 #

一定要开启Firebase调试日志，这是定位问题的关键：

import { setLogLevel } from "firebase/firestore";
setLogLevel("debug");

调试日志会输出完整的请求详情、权限检查结果、错误码等信息，能快速缩小问题范围。

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