React Native Web应用如何集成Firebase认证与Cloud Firestore？

修正后的firebase.js完整配置（适配Firebase v9+模块化版本） #

你当前使用的是Firebase 9及以上的模块化API，2020年的教程大多对应v8版本的命名空间式写法，语法差异很大，下面是同时接入Cloud Firestore和Authentication服务的正确写法：

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
// 引入Auth服务
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  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
};

// 初始化Firebase应用
const app = initializeApp(firebaseConfig);
// 初始化Firestore实例
const db = getFirestore(app)
// 初始化Auth实例，不要使用旧版本的app.auth()写法
const auth = getAuth(app)

// 同时导出db和auth供项目其他组件调用
export { db, auth }

使用注意事项 #

• 业务组件中需要使用登录注册功能时，直接从上述配置文件引入auth实例，配合firebase/auth提供的对应方法即可，比如邮箱密码登录的写法参考：

import { signInWithEmailAndPassword } from "firebase/auth"
import { auth } from "./你的firebase.js文件路径"

// 登录逻辑调用示例
const handleLogin = async (email, password) => {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password)
    const user = userCredential.user
    // 补充登录成功后的后续逻辑
  } catch (error) {
    console.log(error.code, error.message)
  }
}

• 你之前注释的自定义token登录逻辑，同样可以把signInWithCustomToken方法单独引入后，传入auth实例和token调用即可，不要在配置文件内编写业务逻辑，配置文件仅负责初始化服务、导出实例。
• 确认你项目根目录的.env文件中所有REACT_APP开头的环境变量都已正确配置，且变量名和代码中完全一致。

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