React获取Firestore文档后无法正确填充state状态的解决方案

你遇到的state打印为空不是赋值失败，是React state更新机制的正常表现：

• setState是异步操作，调用后不会同步修改当前函数作用域内的state变量
• useEffect的回调是闭包，执行时捕获的是当前渲染周期的state值，也就是你初始化的空对象{}，所以你在setCompany之后立刻打印company，拿到的永远是初始空值
• 既然你控制台里docSnap.data()能正常打印Firestore返回的数据，说明数据拉取、setCompany调用本身都没有问题。

加一个监听company变化的副作用，就能看到state实际已经更新成功：

useEffect(() => {
  console.log("最新的company state：", company);
}, [company]);

页面加载后这个回调会在state更新后触发，打印出你从Firestore拉取的完整数据。

不需要在数据拉取的effect里拿最新state，直接在渲染逻辑里绑定company字段到表单项即可，记得补充加载态、异常判断避免报错：

import { doc, getDoc } from "firebase/firestore";
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { db } from "../Firebase/firebase";

export default function EditData() {
  // 按表单字段设置初始值，避免首次渲染时字段为undefined引发警告
  const [company, setCompany] = useState({
    companyName: "",
    contact: "",
    // 替换为你实际的业务字段
  });
  const [loading, setLoading] = useState(true);
  const params = useParams();

  useEffect(() => {
    const getData = async () => {
      try {
        setLoading(true);
        const docRef = doc(db, "companies", params.id);
        const docSnap = await getDoc(docRef);
        if (docSnap.exists()) {
          setCompany({ ...docSnap.data() });
        }
      } catch (err) {
        console.error("数据拉取失败：", err);
      } finally {
        setLoading(false);
      }
    };
    getData();
  }, [params.id]);

  if (loading) return <div>数据加载中...</div>;

  return (
    <div>
      <form>
        <div>
          <label>公司名称</label>
          <input
            type="text"
            value={company.companyName}
            onChange={(e) => setCompany(prev => ({...prev, companyName: e.target.value}))}
          />
        </div>
        {/* 其余表单项按相同规则绑定value和onChange */}
      </form>
    </div>
  );
}

• 永远不要在调用setState的同一个函数作用域内立刻读取state值，拿不到更新后的结果
• 读取Firestore文档后必须加docSnap.exists()判断，文档不存在时data()会返回undefined，直接展开会抛错
• 表单更新时推荐用函数式setState（即传入prev => 新值的写法），避免闭包导致的旧值覆盖问题
• 数据拉取过程中加加载态，避免用户在表单未填充完成时提前操作

内容的提问来源于stack exchange，提问作者Will Galvão