React Native读取Firebase数据无法显示，求技术排查解决

以下是你的代码中导致数据无法正常显示及功能异常的几个关键问题：

1. 数据库字段名不一致，查询无法匹配数据 #

在useEffect的查询逻辑中，你使用了orderBy('createAt', 'desc')排序，但在addTodo函数里存入数据库的字段是createdAt（多了一个字母d），字段名拼写不一致会导致查询无法正确获取数据。

修复代码：

useEffect(() => {
  // 修正字段名为createdAt，与存入时保持一致
  todoRef.orderBy('createdAt', 'desc').onSnapshot((querySnapshot) => {
    const todos = [];
    querySnapshot.forEach((doc) => {
      const { heading } = doc.data();
      todos.push({ id: doc.id, heading });
    });
    setTodos(todos);
  });
}, []);

2. ScrollView误用，无法渲染列表数据 #

React Native的ScrollView并不支持data和renderItem属性，这两个是FlatList的专属配置项。用ScrollView绑定这些属性，数据根本不会被渲染。

修复代码：
将ScrollView替换为FlatList，同时必须添加keyExtractor属性：

<FlatList
  data={todos}
  keyExtractor={(item) => item.id} // 用文档ID作为唯一标识，FlatList必填
  renderItem={({ item }) => (
    <View>
      <Pressable
        style={styles.container}
        onPress={() => navigation.navigate('Detail', { item })}
      >
        <FontAwesome
          name='trash'
          color='red'
          onPress={() => deleteTodo(item)}
          style={styles.todoIcon}
        />
        <View style={styles.innerContainer}>
          <Text style={styles.itemHeading}>
            {/* 修正表达式语法和属性名大小写 */}
            {item.heading ? item.heading[0].toUpperCase() + item.heading.slice(1) : ''}
          </Text>
        </View>
      </Pressable>
    </View>
  )}
/>

3. 删除函数的多重错误 #

• 函数名拼写错误：dealateTodo应为deleteTodo
• 参数接收错误：函数定义时接收todos参数，但调用时传入的是item，参数不匹配
• 文档引用错误：doc(todos, id)写法错误，Firestore的doc()方法仅需传入文档ID，正确写法是doc(item.id)

修复代码：

const deleteTodo = (item) => {
  todoRef
    .doc(item.id) // 传入选中项的文档ID
    .delete()
    .then(() => {
      alert('Deleted Successfully');
    })
    .catch((error) => {
      alert(error.message); // 显示具体错误信息，便于排查
    });
};

4. 文本渲染的语法错误 #

你在<Text>组件中写的[item.Heading[0].toUpperCase() + item.heading.slice(1)]存在两个问题：

• 属性名大小写错误：item.Heading应为item.heading（存入数据库的是小写heading）
• 表达式未用大括号包裹：React Native中JSX内的表达式必须用{}包裹，方括号会被当作普通文本显示

修复代码：

<Text style={styles.itemHeading}>
  {item.heading ? item.heading[0].toUpperCase() + item.heading.slice(1) : ''}
</Text>
// 添加空值判断，避免heading为空时触发报错

5. 新增函数的冗余参数 #

addTodo函数定义时接收todo参数，但调用时未传参，且函数内部也未使用该参数，直接移除即可：

const addTodo = () => {
  if (addData && addData.length > 0) {
    const timestamp = firebase.firestore.FieldValue.serverTimestamp();
    const data = {
      heading: addData,
      createdAt: timestamp,
    };
    todoRef
      .add(data)
      .then(() => {
        setAddData('');
        Keyboard.dismiss();
      })
      .catch((error) => {
        alert(error.message);
      });
  }
};

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