Firestore VueJS调用报错：Cannot read properties of undefined (reading 'DEADLINE_EXCEEDED')

运行浏览器扩展端的Firestore调用代码时报错，同逻辑的NodeJS代码可以正常在Google Firestore中创建文档，需求是实现浏览器扩展侧调用Firestore接口完成文档创建。

• 公共依赖：NPM 6.14.15、Node.js 14.17.6、@google-cloud/firestore 4.15.1
• 浏览器端额外依赖/环境：TypeScript 4.1.5、Chrome 86.0.4240.183

你当前使用的@google-cloud/firestore是服务端专属SDK，仅支持Node.js等服务端环境，不兼容浏览器环境，这是问题的核心原因。Firestore支持浏览器环境调用，但需要使用浏览器端专属的Firebase SDK，不能直接复用服务端的依赖和初始化逻辑。

步骤1：替换依赖包 #

浏览器扩展端卸载服务端Firestore SDK，安装浏览器端Firebase SDK：

npm uninstall @google-cloud/firestore
npm install firebase@9

步骤2：调整初始化与调用逻辑 #

浏览器端不能使用服务账号密钥文件初始化，需要改用Firebase客户端配置（配置可在Firebase控制台项目设置页获取），示例代码如下：

import { initializeApp } from "firebase/app";
import { getFirestore, collection, addDoc } from "firebase/firestore";

// 替换为你自己项目的客户端配置
const firebaseConfig = {
  apiKey: "你的项目API_KEY",
  authDomain: "你的项目ID.firebaseapp.com",
  projectId: "你的项目ID",
  storageBucket: "你的项目ID.appspot.com",
  messagingSenderId: "你的项目发件人ID",
  appId: "你的项目APP_ID"
};

// 初始化Firebase
const app = initializeApp(firebaseConfig);
// 初始化Firestore实例
const db = getFirestore(app);

// 文档创建调用示例
async function createDocument() {
  try {
    const docRef = await addDoc(collection(db, "你的集合名称"), {
      // 自定义文档字段
      name: "测试数据",
      timestamp: new Date()
    });
    console.log("文档创建成功，ID为：", docRef.id);
  } catch (err) {
    console.error("文档创建失败：", err);
  }
}

步骤3：配置Firestore安全规则 #

浏览器端调用需要配置对应安全规则开放写入权限，测试阶段可临时使用宽松规则，生产环境请替换为符合业务逻辑的权限控制规则：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

步骤4：调整Chrome扩展权限配置 #

在扩展的manifest.json中添加网络访问权限，避免请求被拦截：

{
  "permissions": [
    "https://*.googleapis.com/*",
    "https://*.firebaseio.com/*"
  ]
}

• 若使用Manifest V3版本的Chrome扩展，需要额外调整内容安全策略（CSP）配置，允许访问Firebase相关服务域名，避免CSP拦截请求。
• 核对填写的Firebase客户端配置参数，确保apiKey、projectId等参数与Firebase控制台的配置完全一致。

内容的提问来源于stack exchange，提问作者Yves-Marie Ip