React Native中Cloud Firestore卡片ID获取、传递及删除实现问题

1. 获取Firestore中卡片数据的ID #

当从Firestore查询数据时，每个文档的ID存储在doc.id属性中，你需要在获取数据时将ID一并存入cards数组：

// 在获取cards数据的模块中添加ID字段
import { collection, getDocs } from "firebase/firestore";
import db from "../database/database";

async function fetchCards() {
  const querySnapshot = await getDocs(collection(db, "tasks"));
  const cards = querySnapshot.docs.map(doc => ({
    ...doc.data(),
    id: doc.id // 将文档ID附加到每个card对象
  }));
  // 将cards传递给TaskCard组件使用
}

之后在TaskCard组件的cards.map循环中，就能通过card.id直接访问对应文档的ID。

2. 修复HandelTouch传递ID到EditScreen的问题 #

当前代码存在两个错误：

• onTouchStart={HandelTouch()}会直接执行函数，而非触摸时触发
• 未传递当前card的ID给HandelTouch

修改TaskCard中的触摸事件绑定：

// 修正TaskCard中的返回部分
return hour === ri && day === ci ? (
  <View key={`${index} ${ri}`} onTouchStart={() => HandelTouch(card.id)}>
    <Text>{card.title}</Text>
    <Text>{card.description}</Text>
  </View>
) : (
  <View key={`${index} ${ri}`} />
);

同时，EditScreen需要从route.params中接收ID（而非直接props.id）：

// 修改EditScreen的参数解构
export function EditScreen({ route, navigation }) {
  const id = route.params.id; // 获取传递的文档ID
  // ... 其他代码
}

3. 编写DeleteData函数实现删除文档 #

使用Firestore的deleteDoc方法，传入目标文档的引用即可完成删除：

// 完善EditScreen中的DeleteData函数
async function DeleteData() {
  try {
    await deleteDoc(doc(db, "tasks", id));
    navigation.goBack(); // 删除成功后返回上一页
  } catch (error) {
    console.error("删除失败:", error);
  }
}

// 按钮绑定无需额外参数
<Button title="Delete" onPress={DeleteData}></Button>

另外，EditData函数也需要修正（当前错误使用事件对象作为ID）：

async function EditData() {
  try {
    await updateDoc(doc(db, "tasks", id), {
      title: state.title,
      description: state.description,
    });
    navigation.goBack();
  } catch (error) {
    console.error("更新失败:", error);
  }
}

// 按钮绑定修正
<Button title="Save" onPress={EditData}></Button>

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