Firebase Firestore数据库如何将已添加的数据显示到文本框中

以下是Web端JavaScript的可运行示例，逻辑可复用至安卓、iOS等多端：

1. 前置初始化（已完成Firebase项目配置可跳过） #

首先安装Firebase依赖并初始化Firestore，代码如下：

// 导入Firebase核心和Firestore模块
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// 替换为你自己的Firebase项目配置
const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的项目ID.firebaseapp.com",
  projectId: "你的项目ID",
  storageBucket: "你的项目ID.appspot.com",
  messagingSenderId: "你的发送者ID",
  appId: "你的APP_ID"
};

// 初始化Firebase和Firestore实例
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

2. 收集表单数据写入Firestore #

假设你页面的表单输入框id分别为name、address、nickname、gender，提交按钮id为submitBtn，写入逻辑如下：

import { collection, addDoc } from "firebase/firestore"; 

const submitBtn = document.getElementById('submitBtn');
submitBtn.addEventListener('click', async () => {
  // 收集用户输入的字段
  const userInfo = {
    name: document.getElementById('name').value,
    address: document.getElementById('address').value,
    nickname: document.getElementById('nickname').value,
    gender: document.getElementById('gender').value
  };

  try {
    // 写入users集合，返回新增文档的ID
    const docRef = await addDoc(collection(db, "users"), userInfo);
    console.log("数据写入成功，文档ID：", docRef.id);
    // 写入成功后调用回显方法，传入文档ID
    showUserInfo(docRef.id);
  } catch (e) {
    console.error("写入失败：", e);
  }
});

3. 插入成功后回显数据到文本框 #

回显方法showUserInfo实现逻辑，查询对应文档内容并赋值到文本框：

import { doc, getDoc } from "firebase/firestore"; 

async function showUserInfo(docId) {
  const docRef = doc(db, "users", docId);
  const docSnap = await getDoc(docRef);

  if (docSnap.exists()) {
    const userData = docSnap.data();
    // 把数据赋值给对应展示用的文本框，假设展示文本框id为show_xxx
    document.getElementById('show_name').value = userData.name;
    document.getElementById('show_address').value = userData.address;
    document.getElementById('show_nickname').value = userData.nickname;
    document.getElementById('show_gender').value = userData.gender;
  } else {
    console.log("未找到对应文档");
  }
}

如果需要实时更新数据，可替换为onSnapshot监听方法，数据库内容变动时会自动更新文本框内容，无需手动触发查询。

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