React Native向Firestore插入数据后UI不显示但查询可获取结果

在React Native项目中使用@react-native-firebase/firestore向Firestore数据库插入数据后，代码查询能获取到数据并在日志中打印用户列表，但Firestore控制台UI中却看不到这些数据；同时打印firestore().app.name得到[DEFAULT]，对此存在疑问。

日志输出 #

LOG  Total users:  15
LOG  User ID:  00HxI74CXbjk54IaFOiu {"age": 39, "name": "Fernando"}
LOG  User ID:  2rBtzjf9W9cCfADx20V6 {"age": 39, "name": "Fernando"}
LOG  User ID:  99YNpKHMIcTls9PYKGQ9 {"age": 39, "name": "Fernando"}
LOG  User ID:  P1XF5ICg6KgcDYyA069j {"age": 39, "name": "Fernando"}
LOG  User ID:  Pm18VRl9Tl0ES6sDF7oT {"age": 39, "name": "Fernando"}
...

原始代码 #

import React, { useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import firebase from '@react-native-firebase/app';
import firestore from '@react-native-firebase/firestore';

// Firebase配置
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

// 初始化Firebase
if (!firebase.apps.length) {
  console.log('Initializing Firebase');
  firebase.initializeApp(firebaseConfig);
} else {
  console.log('Firebase already initialized');
}

export default function App() {
  useEffect(() => {
    // console.log('Firestore instance:', firestore());
  }, []);
  
  const addUser = async () => {
    console.log('adding user');
    console.log(firestore().app.name);

    const usersRef = firestore().collection('Users');
    usersRef.add({
      name: 'Fernando',
      age: 39,
    })
    .then(() => {
      console.log('User added!');
    });

     usersRef
      // Filter results
      .where('age', '==', 39)
      .get()
      .then(querySnapshot => {
        console.log('Total users: ', querySnapshot.size);
        querySnapshot.forEach(documentSnapshot => {
          console.log('User ID: ', documentSnapshot.id, documentSnapshot.data());
        });

      });

    console.log('done');
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Add User to Firestore</Text>
      <Button title="Add User" onPress={addUser} />
    </View>
  );
}

1. 异步操作顺序问题 #

你的代码中add和get是并行执行的，get没有等待add完成就发起查询，此时读取的是Firestore本地缓存中的旧数据，新插入的数据还未同步到服务器，所以控制台看不到。

修复方式：利用async/await保证操作顺序，确保插入完成后再执行查询：

const addUser = async () => {
  console.log('adding user');
  console.log(firestore().app.name);

  const usersRef = firestore().collection('Users');
  try {
    // 等待插入操作完成
    await usersRef.add({
      name: 'Fernando',
      age: 39,
    });
    console.log('User added!');

    // 插入完成后再查询（可选：强制从服务器获取数据，跳过本地缓存）
    const querySnapshot = await usersRef
      .where('age', '==', 39)
      .get({ source: 'server' });

    console.log('Total users: ', querySnapshot.size);
    querySnapshot.forEach(documentSnapshot => {
      console.log('User ID: ', documentSnapshot.id, documentSnapshot.data());
    });
  } catch (error) {
    console.error('操作失败:', error);
  }

  console.log('done');
};

2. [DEFAULT]应用名称说明 #

firestore().app.name返回[DEFAULT]是正常情况，Firebase默认应用的名称就是[DEFAULT]，当你只初始化一个Firebase应用时，这个结果完全符合预期，无需担心。

额外排查点 #

• 验证Firebase配置：确认firebaseConfig中的projectId与Firestore控制台的项目ID完全一致，避免连接到错误的项目
• 检查安全规则：调试时可临时将Firestore安全规则设置为allow read, write: if true;，验证是否是规则阻止了数据写入（生产环境需修改为安全规则）
• 网络与控制台刷新：确保设备网络正常，手动刷新Firestore控制台页面，避免控制台缓存未更新

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