React Native应用Firestore中mood字段用户重登后重置问题修复咨询

问题现象 #

• React Native应用中，用户退出登录后重新登录，Firestore对应用户文档的mood字段会被重置为空字符串，无法保留之前录入的数据
• 需要实现：不重置已有数据，同时允许用户在已有数据基础上新增内容
• 排查发现：移除update语句中的mood字段，重登数据不会丢失，但无法再添加新的mood数据

相关代码片段 #

const HomeScreen = () => {

  const [mood, setMood] = useState('');

  const uid = auth.currentUser?.uid;
  useEffect(() => {
    firestore.collection('Users').doc(uid).get().then((documentSnapshot) => {
      setMood(documentSnapshot.data().mood);
      console.log('set to: '+ uid)
    });
  }, [uid]);

  firestore.collection('Users').doc(uid).update({
    mood,
    stressLevel,
  });

  const handleSignOut = () => {
    auth
      .signOut()
      .then(() => {
        navigation.navigate('Login')
      })
      .catch((error) => {
        alert(error)
      })
  };

  <IconButton  
    icon={<Icon as={MaterialCommunityIcons} name="emoticon-frown" />} 
    borderRadius="full"
    _icon={{color: '#ffcb4c', size: 8}} 
    _hover={{bg: 'coolGray.800:alpha.20'}} 
    onPress={() => setMood(firebase.firestore.FieldValue.arrayUnion(
      ''.concat(0,'  ',format(new Date(), "dd/MM/yyyy 'at' h:mm a"))))
    }
    _pressed={{bg: '#ffcb4c', _ios: {_icon: {size: "2xl"}}}} 
    _ios={{icon: {size: "2xl"}}} 
  />
</View>

错误原因 #

1. 初始状态类型不匹配：mood初始值是字符串''，但你用arrayUnion操作的是数组类型，类型冲突导致数据异常
2. 顶层update触发时机错误：组件每次渲染（包括初始渲染）都会执行顶层的update语句，此时useEffect还没完成Firestore数据读取，mood还是空字符串，直接覆盖了数据库里的已有数据
3. 状态更新逻辑错误：按钮onPress里直接把arrayUnion的结果赋值给状态，不符合React状态更新逻辑，导致状态类型混乱

解决方案 #

1. 修正初始状态类型 #

把mood初始值改为空数组，和Firestore中arrayUnion操作的类型保持一致：

const [mood, setMood] = useState([]);

2. 移除顶层的update，改为状态变化时同步 #

删除组件顶层的update语句，改用useEffect监听mood和stressLevel的变化，仅当状态更新时同步到Firestore，同时判断uid是否存在：

useEffect(() => {
  if (!uid) return;
  firestore.collection('Users').doc(uid).update({
    mood,
    stressLevel,
  });
}, [uid, mood, stressLevel]);

3. 修正Firestore数据读取逻辑 #

读取数据时，确保如果文档中没有mood字段，默认设为空数组，避免出现undefined或字符串类型：

useEffect(() => {
  if (!uid) return;
  firestore.collection('Users').doc(uid).get().then((documentSnapshot) => {
    const userData = documentSnapshot.data();
    // 若mood字段不存在或为null，默认赋值为空数组
    setMood(userData?.mood || []);
    console.log('set to: '+ uid);
  });
}, [uid]);

4. 修正按钮 onPress 的状态更新逻辑 #

不要直接用arrayUnion更新状态，改用React的函数式更新确保拿到最新状态，或者直接调用Firestore的update（二选一即可）：

方式一：先更新本地状态，再通过useEffect同步到Firestore

onPress={() => {
  const newEntry = `${0}  ${format(new Date(), "dd/MM/yyyy 'at' h:mm a")}`;
  // 函数式更新，基于当前最新状态添加新条目
  setMood(prevMood => [...prevMood, newEntry]);
}}

方式二：直接调用Firestore的update，再同步本地状态

onPress={() => {
  if (!uid) return;
  const newEntry = `${0}  ${format(new Date(), "dd/MM/yyyy 'at' h:mm a")}`;
  // 直接用arrayUnion更新Firestore
  firestore.collection('Users').doc(uid).update({
    mood: firebase.firestore.FieldValue.arrayUnion(newEntry)
  }).then(() => {
    // 更新成功后同步本地状态
    setMood(prevMood => [...prevMood, newEntry]);
  });
}}

5. 修复Firestore现有数据类型（可选） #

如果之前Firestore中的mood字段是字符串类型，需要手动修改为数组，或者在读取时兼容处理：

// 读取数据时兼容字符串转数组
setMood(Array.isArray(userData?.mood) ? userData.mood : [userData?.mood].filter(Boolean));

总结 #

核心问题是初始渲染时用空字符串覆盖了Firestore的已有数据，同时状态类型和数据库字段类型不匹配。通过调整状态初始值、控制update触发时机、修正状态更新逻辑，就能实现保留已有数据并允许新增的需求。

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