如何解决React中Firebase 403 PERMISSION_DENIED权限拒绝错误

你的Firebase配置代码本身没有语法问题，403权限拒绝基本是后端规则或认证流程的问题，以下是具体排查方向：

1. 检查Firestore安全规则 #

默认的Firestore安全规则会限制未认证用户的读写操作，如果规则配置过于严格或未正确设置，就会触发403。

• 临时调试用规则仅开发环境使用，禁止生产环境保留：

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

• 生产环境推荐规则仅允许已认证用户读写：

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

修改规则需登录Firebase控制台，进入Firestore数据库→规则页面更新并发布。

2. 确认用户已完成认证流程 #

如果规则要求用户必须认证才能访问数据，要确保代码中已完成用户登录流程。比如邮箱密码登录示例：

import { signInWithEmailAndPassword } from "firebase/auth";
import { auth } from './firebase';

// 登录函数
const login = async (email, password) => {
  try {
    await signInWithEmailAndPassword(auth, email, password);
    // 登录成功后再执行Firestore读写操作
  } catch (error) {
    console.error(error);
  }
}

只有用户成功认证后，Firebase才会赋予对应访问权限。

3. 验证环境变量是否正确加载 #

检查.env文件中REACT_APP_开头的Firebase配置变量是否正确填写，且项目启动时变量已加载。可在组件中打印变量值确认：

console.log(process.env.REACT_APP_FIREBASE_API_KEY);

若变量为空，会导致Firebase初始化异常，间接引发权限错误。

4. 检查API密钥的域名限制 #

登录Firebase控制台→项目设置→API密钥，查看是否设置了HTTP referrer限制。若本地开发域名（如localhost:3000）或生产域名不在允许列表，也会触发403。可暂时取消限制测试，或添加需要的域名到允许列表。

你的firebase.js配置代码：

import "firebase/compat/auth"
import { getFirestore } from 'firebase/firestore/lite'
import { initializeApp } from "firebase/app";
import { getAuth } from 'firebase/auth';
const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app)
export const db = getFirestore(app)
export default app

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