在React Native Expo(TypeScript)中集成Firebase时遇window未定义错误

这个错误是因为Expo Web在静态渲染（Node.js环境）时，Firebase Analytics的初始化逻辑尝试访问浏览器专属的window对象，而Node.js环境中不存在该对象导致的。以下是几种可行的解决办法：

方法1：仅在浏览器环境初始化Firebase Analytics #

通过判断运行环境，确保Analytics只在Web端且支持的情况下初始化：

import { Platform } from 'react-native';
import { initializeApp } from 'firebase/app';
import { getAnalytics, isSupported } from 'firebase/analytics';

const firebaseConfig = { /* 你的Firebase配置信息 */ };
const app = initializeApp(firebaseConfig);

let analytics;
// 只在Web环境执行Analytics初始化
if (Platform.OS === 'web') {
  isSupported().then(supported => {
    if (supported) {
      analytics = getAnalytics(app);
    }
  });
}

方法2：直接禁用Firebase Analytics（如果不需要该功能） #

在Firebase初始化时添加配置项禁用Analytics，避免触发相关逻辑：

import { initializeApp } from 'firebase/app';

const firebaseConfig = { /* 你的Firebase配置信息 */ };
const app = initializeApp(firebaseConfig, {
  disableAnalytics: true
});

方法3：在客户端生命周期中延迟初始化Firebase #

利用React的useEffect钩子，确保Firebase初始化仅在浏览器客户端执行（静态渲染阶段不执行）：

import { useEffect, useState } from 'react';
import { initializeApp } from 'firebase/app';
import { getAnalytics } from 'firebase/analytics';

function App() {
  const [firebaseApp, setFirebaseApp] = useState(null);

  useEffect(() => {
    // 仅在客户端初始化Firebase
    const app = initializeApp({ /* 你的Firebase配置信息 */ });
    // 可选：初始化Analytics
    const analytics = getAnalytics(app);
    setFirebaseApp(app);
  }, []);

  // 未初始化完成时显示加载占位符
  if (!firebaseApp) return <div>加载中...</div>;

  return (
    {/* 你的应用组件内容 */}
  );
}

export default App;

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