React调用setCurrentDevice后无法立即获取Firestore数据值的问题

问题原因 #

React的状态更新（比如setCurrentDevice这类useState生成的更新函数）是异步批量处理的，调用后不会立刻修改对应的状态变量。所以你在调用setCurrentDevice后马上打印currentDevice，拿到的还是更新前的初始值（也就是undefined），而doc.data()能正常打印是因为它直接取的是数据库返回的原始数据。

解决方案 #

方案1：直接使用原始数据（最简便）

如果你的后续操作只是需要用到设备数据，不用依赖React状态，直接用doc.data()返回的值即可，没必要等状态更新：

const q = query(collection(db, 'DeviceDetails'), where('serialNo', '==', SerialNo))

const querySnapshot = await getDocs(q)
querySnapshot.forEach((doc) => {
  const deviceData = doc.data();
  setCurrentDevice(deviceData);
  console.log(deviceData);
  // 所有需要用设备数据的逻辑直接写在这里，用deviceData即可
})

方案2：用useEffect监听状态变化（必须依赖状态时用）

如果你的逻辑必须依赖更新后的currentDevice状态，就用useEffect监听这个状态的变化，状态更新后再执行对应逻辑：

import { useEffect, useState } from 'react';

// 组件内定义状态
const [currentDevice, setCurrentDevice] = useState();

// 封装获取设备数据的函数
const fetchDeviceData = async () => {
  const q = query(collection(db, 'DeviceDetails'), where('serialNo', '==', SerialNo));
  const querySnapshot = await getDocs(q);
  querySnapshot.forEach((doc) => {
    setCurrentDevice(doc.data());
  });
};

// 监听currentDevice变化，状态更新后执行逻辑
useEffect(() => {
  if (currentDevice) {
    console.log(currentDevice);
    // 这里写需要用到更新后状态的代码
  }
}, [currentDevice]); // 依赖项设为currentDevice，状态变化时触发

// 组件挂载或SerialNo变化时，获取设备数据
useEffect(() => {
  fetchDeviceData();
}, [SerialNo]);

方案3：优化查询逻辑（如果serialNo是唯一值）

如果serialNo是设备的唯一标识，查询结果只会有一个文档，那可以不用forEach，直接取第一个文档，代码更简洁：

const fetchDeviceData = async () => {
  const q = query(collection(db, 'DeviceDetails'), where('serialNo', '==', SerialNo));
  const querySnapshot = await getDocs(q);
  if (!querySnapshot.empty) {
    const deviceData = querySnapshot.docs[0].data();
    setCurrentDevice(deviceData);
    console.log(deviceData); // 直接打印原始数据
  }
};

核心总结 #

• React状态更新是异步的，调用setState后不能立刻拿到新状态
• 优先考虑直接使用数据库返回的原始数据做同步操作
• 必须依赖状态时，用useEffect监听状态变化来执行后续逻辑

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