使用React+TypeScript+react-hooks-firebase遇Firebase权限拒绝问题求助

问题概况 #

开发栈：react-hooks-firebase + React + TypeScript
触发错误：[code=permission-denied]: Permission denied on resource project
已将Firebase数据库权限规则设为允许访问，相关截图如下：

核心问题定位 #

你的firebase.ts配置存在两个关键错误，直接导致权限拒绝：

1. 环境变量被错误用引号包裹，代码读取的是字符串字面量而非实际环境变量值
2. authDomain配置项拼写错误（AUTH_DOMATIN应为AUTH_DOMAIN）

错误配置片段：

export const firebaseConfig = {
  apiKey: 'import.meta.env.API_KEY', // 引号导致无法读取真实变量
  authDomain: 'import.meta.env.AUTH_DOMATIN', // 拼写错误
  // ... 其余配置项同理
};

修复步骤 #

1. 修正Firebase配置文件 #

移除环境变量的引号，同时修正拼写错误：

import { initializeApp } from "firebase/app";
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';

export const firebaseConfig = {
  apiKey: import.meta.env.API_KEY,
  authDomain: import.meta.env.AUTH_DOMAIN,
  projectId: import.meta.env.PROJECT_ID,
  storageBucket: import.meta.env.STORAGE_BUCKET,
  messagingSenderId: import.meta.env.MESSAGING_SENDER_ID,
  appId: import.meta.env.APP_ID,
  measurementId: import.meta.env.MEASUREMENT_ID
};

export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app)
export const db = getFirestore(app);
export const storage = getStorage(app);

2. 确认环境变量配置合规 #

Vite要求环境变量必须以VITE_开头才能被暴露，确保你的.env/.env.local文件格式正确：

VITE_API_KEY=你的实际API密钥
VITE_AUTH_DOMAIN=你的实际认证域名
VITE_PROJECT_ID=你的实际项目ID
# 其余变量按此格式填写

对应代码中需改为import.meta.env.VITE_API_KEY这类带前缀的变量名（如果你的环境变量名带VITE_前缀的话）。

3. 验证Firebase规则生效 #

确认权限规则已发布（而非草稿状态），以Firestore为例，测试规则应如下：

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

4. 重启开发服务 #

修改配置后必须重启Vite开发服务器，确保新配置加载生效。

验证修复 #

重启服务后尝试访问Firebase资源，权限拒绝错误应消失。

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