React Native + Firebase如何全局获取Firestore用户信息及存储最佳实践

全局获取用户信息实现 #

你只需要在现有App.js的用户登录状态监听逻辑里补充Firestore用户文档查询逻辑，把拿到的用户信息存在state中，传递给抽屉组件即可，修改后的代码如下：

export class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      loaded: false,
      fontsLoaded: false,
      loggedIn: false,
      userInfo: null // 新增存储用户信息的状态
    }
  }

  componentDidMount() {
    this.loadFonts();
    firebase.auth().onAuthStateChanged((user) => {
      if (!user) {
        this.setState({
          loggedIn: false,
          loaded: true,
          userInfo: null // 退出登录清空用户信息
        })
      } else {
        // 登录成功后查询对应用户的Firestore文档
        firebase.firestore().collection("Patients")
          .doc(user.uid)
          .get()
          .then((docSnapshot) => {
            if (docSnapshot.exists) {
              this.setState({
                loggedIn: true,
                loaded: true,
                userInfo: docSnapshot.data() // 存储完整用户信息
              })
            }
          })
          .catch((err) => {
            console.log("获取用户信息失败：", err)
            this.setState({
              loggedIn: true,
              loaded: true
            })
          })
      }
    })
  }
}

后续你直接把this.state.userInfo?.name和this.state.userInfo?.lastname传递给抽屉菜单组件渲染即可，可选链语法可以避免用户信息未加载完成时的空值报错。

• 全局状态托管：使用React Context API将用户信息存在全局上下文，所有组件不需要逐层传参就可以直接获取用户信息，避免重复请求Firestore。
• 实时数据监听：将单次的get请求换成onSnapshot监听用户文档变动，当用户在APP内修改个人信息后，全局的用户信息会自动同步更新，不需要手动触发刷新。
• 本地缓存优化：使用AsyncStorage把用户基础信息存在本地缓存，APP冷启动时优先读取缓存展示内容，再后台同步Firestore的最新数据，大幅降低用户等待时间。
• 双端存储基础信息：姓名、头像这类不常变更的基础信息可以同时写入Firebase Auth的displayName、photoURL字段，不需要查Firestore，直接读取firebase.auth().currentUser就能快速拿到数据。
• 权限校验补充：给Patients集合添加安全规则，只允许用户本人读写自己的文档，避免用户信息泄露风险。

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