无法连接Firebase本地模拟器（Auth/Firestore等）求助

1. 修正Auth模拟器端口不匹配 #

你的firebase.json中Auth模拟器端口配置为9099，但代码里写的是9090，这是导致auth/network-request-failed错误的直接原因。修改firebase.js中的Auth模拟器连接代码：

connectAuthEmulator(auth, "http://localhost:9099");

2. 访问正确的Hosting模拟器端口 #

你当前访问的localhost:3000是React开发服务器端口，而非Firebase Hosting模拟器端口。根据firebase.json配置，Hosting模拟器运行在localhost:5000，请直接访问这个地址。

如果需要让Hosting模拟器加载最新的本地代码，先执行npm run build生成最新的build目录，再启动模拟器。

3. 生产凭据无需替换 #

使用生产环境的firebaseConfig完全没问题，connectXXXEmulator方法会自动将所有请求导向本地模拟器，不会访问生产环境服务，不需要修改环境变量中的凭据。

4. 检查模拟器启动状态 #

确保通过firebase emulators:start命令启动所有模拟器，查看终端日志确认每个服务的端口与配置一致：

• Auth: 9099
• Firestore: 8080
• Storage: 9199
• Functions: 5001
• Hosting: 5000

如果遇到跨域问题，可以在firebase.json的emulators配置中为每个服务添加host: "0.0.0.0"，允许外部访问：

"emulators": {
  "auth": {
    "port": 9099,
    "host": "0.0.0.0"
  },
  "firestore": {
    "port": 8080,
    "host": "0.0.0.0"
  },
  // 其他模拟器同理添加host配置
}

5. 优化Functions初始化代码 #

将getFunctions(getApp())改为已初始化的app变量，保持代码一致性：

export const functions = getFunctions(app);
connectFunctionsEmulator(functions, "localhost", 5001);

修改后的完整firebase.js代码 #

const firebaseConfig = {
  apiKey: process.env.REACT_APP_APIKEY,
  authDomain: process.env.REACT_APP_AUTHDOMAIN,
  projectId: process.env.REACT_APP_PROJECTID,
  storageBucket: process.env.REACT_APP_STORAGEBUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID,
  appId: process.env.REACT_APP_APPID,
  measurementId: process.env.REACT_APP_MEASUREMENTID,
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
connectAuthEmulator(auth, "http://localhost:9099");
export const db = getFirestore(app);
connectFirestoreEmulator(db, "localhost", 8080);
export const storage = getStorage(app);
connectStorageEmulator(storage, "localhost", "9199");
export const functions = getFunctions(app);
connectFunctionsEmulator(functions, "localhost", 5001);

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