useState更新的数组无法存入Firebase，页面刷新主题数据丢失

问题场景 #

学习Firebase开发论坛项目，希望将主题数据存入Firebase避免页面刷新后丢失。测试静态数据能正常存入，但替换为useState维护的topic数组时，Firebase中仅存入空数组，刷新页面后创建的主题全部消失。

点击「创建主题」按钮时，用户输入的标题和消息会加入topic数组（每个主题是包含标题、作者等字段的对象），首页通过数组映射、排序渲染主题。相关代码：

const [topic, setTopic] = useState([]);

const [title, setTitle] = useState();
const [message, setMessage] = useState();

const addTopic = (e) => {
    e.preventDefault();
    setTopic([
      ...topic,
      {
        id: 4,
        title: title,
        message,
        author: "Dagger",
        count: 1,
        date: new Date(),
      },
    ]);

    try {
      const docRef = addDoc(collection(firestore, "topics"), {
        topic,
      });
      console.log("Document written with ID: ", docRef.id);
    } catch (e) {
      console.error("Error adding document: ", e);
    }
  };

问题原因 #

1. useState异步更新特性：调用setTopic后，topic状态不会立刻更新，此时直接用topic变量传给Firebase，拿到的还是更新前的旧值（初始为空数组），所以存入的是空数组。
2. 存储方式不合理：当前把整个topic数组作为一个文档存入Firebase，每次添加新主题都要重复存储整个数组，不仅效率低，还容易出现数据不一致。

解决方案 #

方案1：修正当前数组存储逻辑，获取最新状态 #

利用useState的函数式更新，先拿到最新的topic数组，再存入Firebase：

const addTopic = (e) => {
    e.preventDefault();
    // 构造新主题对象
    const newTopic = {
        id: Date.now(), // 用时间戳生成唯一id，避免固定id重复
        title: title,
        message,
        author: "Dagger",
        count: 1,
        date: new Date(),
    };

    // 函数式更新获取最新状态，同步更新本地和Firebase
    setTopic(prevTopics => {
        const updatedTopics = [...prevTopics, newTopic];
        addDoc(collection(firestore, "topics"), {
            topic: updatedTopics
        }).then(docRef => {
            console.log("Document written with ID: ", docRef.id);
        }).catch(e => {
            console.error("Error adding document: ", e);
        });
        return updatedTopics;
    });

    // 清空输入框
    setTitle("");
    setMessage("");
};

方案2：更合理的Firebase存储方式（推荐） #

不要把整个数组存为一个文档，而是每个主题单独存为一个文档，符合Firebase设计逻辑，也方便后续查询、修改单个主题：

1. 修改添加主题逻辑

const addTopic = (e) => {
    e.preventDefault();
    if (!title || !message) return; // 非空校验

    // 直接存入单个主题对象
    try {
        const docRef = addDoc(collection(firestore, "topics"), {
            title: title,
            message,
            author: "Dagger",
            count: 1,
            date: new Date(),
        });
        console.log("Document written with ID: ", docRef.id);
        
        // 同步更新本地状态
        setTopic(prev => [...prev, {
            id: docRef.id, // 用Firebase生成的文档id作为本地id
            title,
            message,
            author: "Dagger",
            count: 1,
            date: new Date(),
        }]);

        // 清空输入框
        setTitle("");
        setMessage("");
    } catch (e) {
        console.error("Error adding document: ", e);
    }
};

2. 页面加载时从Firebase读取主题

刷新页面后自动同步Firebase数据，避免丢失：

useEffect(() => {
    // 实时监听topics集合变化，同步到本地状态
    const unsubscribe = onSnapshot(collection(firestore, "topics"), (snapshot) => {
        const topicsData = snapshot.docs.map(doc => ({
            id: doc.id,
            ...doc.data()
        }));
        // 按日期倒序排序
        topicsData.sort((a, b) => b.date - a.date);
        setTopic(topicsData);
    });

    // 组件卸载时取消监听
    return () => unsubscribe();
}, []);

额外注意事项 #

• 避免使用固定id（如代码里的id:4），建议用Firebase自动生成的文档id或时间戳，防止id重复。
• 增加输入非空校验，避免存入无效主题。
• 使用onSnapshot可实现实时同步，Firebase数据变化时本地状态自动更新，无需手动刷新页面。

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