React部署版本无法请求Firebase 求助排查问题

问题概述 #

本地服务器上React应用运行正常，可正常向Firebase发起请求并获取数据，但部署至远程服务器后，完全无法发起Firebase请求。

相关代码 #

Firebase配置 #

const firebaseConfig = {
    apiKey: 'AIzaSyDjRWZ9**********QwkgyqTeVbN*',
    authDomain: 'project-keeper-2a3fe.firebaseapp.com',
    databaseURL:
        'https://******.europe-west1.firebasedatabase.app',
    projectId: 'project-keeper-2a3fe',
    storageBucket: 'project-keeper-2a3fe.appspot.com',
    messagingSenderId: '495347609056',
    appId: '1:495347609056:web:d058a40ddff6b5420ecf85',
    measurementId: 'G-SKDZVBKHN5'
}

export default firebaseConfig

Firebase初始化代码 #

import { initializeApp } from 'firebase/app'
import { getAnalytics } from 'firebase/analytics'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore'

import firebaseConfig from '../../config/firebaseConfig'

const app = initializeApp(firebaseConfig)

const db = getFirestore(app)
const auth = getAuth(app)

const analytics = getAnalytics(app)

export { db }

Firestore请求执行代码 #

import { db } from '../../shared/api/firebase/firebase'
import { collection, getDocs } from 'firebase/firestore'


export const CardsListPage = () => {
    const [cards, setCards] = useState([])

    useEffect(() => {
        return async () => {
            const colRef = collection(db, 'cards')
            const snapshots = await getDocs(colRef)
            const docs = snapshots.docs?.map(doc => {
                const data = doc.data()
                data.id = doc.id
                return data
            })
            setCards(docs)
        }
    }, [])

    return (
        <>
            <Header />

            <main className='main'>
                <div className='main-container'>
                    <div className='main-container__cards'>
                        {cards.map(card => (
                            <Card key={card.id} {...card} />
                        ))}
                    </div>
                </div>
                {/* 省略剩余代码 */}
            </main>
        </>
    )
}

排查方向 #

• 检查Firebase授权域名：进入Firebase控制台，找到项目的Authentication -> 登录方法 -> 授权域名，确认已添加远程服务器的域名。本地localhost默认允许访问，但远程域名必须手动添加，否则请求会被Firebase拦截。
• 排查CORS策略问题：打开浏览器开发者工具的Network面板，查看请求的错误信息，确认是否存在CORS相关报错。部分远程服务器或CDN的额外配置可能导致请求被拦截。
• 修复Firebase初始化逻辑：getAnalytics(app)在非浏览器环境或禁用JavaScript的场景下可能报错，建议添加条件判断避免初始化失败：

  if (typeof window !== 'undefined') {
    const analytics = getAnalytics(app)
  }
  

  同时确认远程环境下firebaseConfig是否正确加载，避免部署时配置信息丢失或错误。
• 修正useEffect异步逻辑：当前代码中useEffect返回async函数是错误写法，useEffect的清理函数不能为异步函数，会导致请求未执行或执行异常。正确写法如下：

  useEffect(() => {
    const fetchData = async () => {
      try {
        const colRef = collection(db, 'cards')
        const snapshots = await getDocs(colRef)
        const docs = snapshots.docs?.map(doc => ({
          ...doc.data(),
          id: doc.id
        }))
        setCards(docs)
      } catch (err) {
        console.error('数据请求失败:', err)
      }
    }
    fetchData()
  }, [])
  

• 检查服务器网络连通性：在远程服务器上执行curl https://firestore.googleapis.com，测试是否能正常访问Firebase服务域名，排查防火墙、代理等网络限制。
• 验证Firestore安全规则：确认Firestore安全规则是否允许当前应用的访问权限。如果应用不需要用户登录即可获取数据，可临时将规则调整为允许公开读取（上线后需配置严格权限）：

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /cards/{document=**} {
        allow read: if true;
        // 根据需求配置写入权限
      }
    }
  }
  

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