Expo项目Firebase数据上传报错：Cannot read property 'includes' of undefined

问题 #

在Expo项目中点击提交按钮向Firebase数据库上传数据时，触发以下内部错误：

ERROR  [2024-01-21T03:39:39.733Z]  @firebase/firestore: Firestore (10.7.2): INTERNAL UNHANDLED ERROR:  TypeError: Cannot read property 'includes' of undefined

已尝试卸载node_modules及Firebase依赖、更换新Firebase账户，但问题仍未解决，无法定位原因。相关代码如下：

import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
import { getAuth } from 'firebase/auth';
import { getFirestore, doc, setDoc } from 'firebase/firestore';
import app from '../config/FirebaseConfig'; // Adjust this path as necessary

const DataInput = () => {
  const [monthOrderTotal, setMonthOrderTotal] = useState('');
  const [monthDollarAmount, setMonthDollarAmount] = useState('');

  const firestore = getFirestore(app);
  const auth = getAuth();

  const handleSave = async () => {
    const user = auth.currentUser;
    if (user) {
      try {
        const userData = {
          monthOrderTotal,
          monthDollarAmount
        };
        // Merge the new data into the existing document or create a new document if it doesn't exist
        await setDoc(doc(firestore, 'users', user.uid), userData, { merge: true });
        console.log('Data saved successfully');
      } catch (error) {
        console.error('Error saving data: ', error);
      }
    } else {
      console.error('No user logged in');
    }
  };

  return (
    <View style={styles.container}>
      <Text>Data Input Screen</Text>
      <TextInput
        style={styles.input}
        placeholder="Month Order Total"
        value={monthOrderTotal}
        onChangeText={setMonthOrderTotal}
        keyboardType="numeric"
      />
      <TextInput
        style={styles.input}
        placeholder="Month Dollar Amount"
        value={monthDollarAmount}
        onChangeText={setMonthDollarAmount}
        keyboardType="numeric"
      />
      <Button title="Save" onPress={handleSave} />
    </View>
  );
};

export default DataInput;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
    width: '80%'
  }
});

排查与解决建议 #

• 补全缺失的React Hook导入：代码中使用了useState但未从react导入，这会导致状态变量初始化异常，进而触发Firestore内部逻辑错误。添加如下导入语句：

  import { useState } from 'react';
  

• 验证Firebase配置完整性：检查../config/FirebaseConfig中的应用初始化代码，确保initializeApp传入了完整的配置参数（apiKey、authDomain、projectId、storageBucket、messagingSenderId、appId等），配置缺失或错误会导致Firestore客户端运行异常。
• 调整Firebase依赖版本：当前使用的Firestore 10.7.2可能存在兼容性问题，尝试降级到稳定版本（如10.6.0）或升级至最新稳定版，修改package.json后重新安装依赖：

  npm install firebase@10.6.0
  

• 优化用户状态监听逻辑：auth.currentUser在组件初始化阶段可能尚未完成加载，改用onAuthStateChanged监听用户登录状态，确保在用户状态稳定后执行数据写入：

  import { useState, useEffect } from 'react';
  import { onAuthStateChanged } from 'firebase/auth';
  
  const DataInput = () => {
    const [monthOrderTotal, setMonthOrderTotal] = useState('');
    const [monthDollarAmount, setMonthDollarAmount] = useState('');
    const [currentUser, setCurrentUser] = useState(null);
    const firestore = getFirestore(app);
    const auth = getAuth();
  
    useEffect(() => {
      const unsubscribe = onAuthStateChanged(auth, (user) => {
        setCurrentUser(user);
      });
      return unsubscribe;
    }, []);
  
    const handleSave = async () => {
      if (currentUser) {
        try {
          const userData = {
            monthOrderTotal,
            monthDollarAmount
          };
          await setDoc(doc(firestore, 'users', currentUser.uid), userData, { merge: true });
          console.log('Data saved successfully');
        } catch (error) {
          console.error('Error saving data: ', error);
        }
      } else {
        console.error('No user logged in');
      }
    };
  };
  

• 彻底清理缓存并重建项目：执行以下命令清除依赖缓存和Expo缓存，避免缓存残留导致的异常：

  rm -rf node_modules package-lock.json
  npm install
  npx expo start --clear
  

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