React状态未随Firestore数据更新：代码问题排查

核心问题：异步回调执行时机错误 #

onSnapshot 是Firestore的异步监听函数，它的回调会在数据发生变化时延迟触发，但你当前的代码在调用onSnapshot后立刻执行console.log(entries)和yield put(getDiary(entries))——这时候回调还没运行，entries还是空数组，所以状态不会被正确更新。

你看到entries能正确打印，是因为后续回调触发后数组被填充，但此时put动作已经执行完毕，状态不会再自动同步。

其他潜在问题 #

• 条目重复累积：每次快照更新时，你都往同一个entries数组里push数据，没有清空数组，会导致旧条目重复添加。
• 内存泄漏风险：onSnapshot返回的unsubscribe函数从未被调用，组件卸载后会持续监听Firestore，造成不必要的资源消耗。

修复后的代码 #

diarySaga.ts 修正版 #

function* addDiarySaga(action: any) {
    const { title, description } = action.payload;
    yield addDoc(diaryRef, { title, description });
}

function* getDiarySaga() {
    try {
        // 用fork创建独立任务，配合take处理取消逻辑
        const task = yield fork(function* () {
            const unsubscribe = onSnapshot(diaryRef, (querySnapshot) => {
                // 每次快照更新时重新生成数组，避免重复
                const entries: DiaryEntry[] = [];
                querySnapshot.docs.forEach((doc) => {
                    const { title, description } = doc.data();
                    entries.push({ title, description });
                });
                // 在回调内部触发状态更新，确保数据同步
                put(getDiary(entries));
            });

            // 监听取消信号，执行订阅清理
            yield take("diary/cancelGetDiary");
            unsubscribe();
        });

        // 实际项目中需在组件卸载时dispatch "diary/cancelGetDiary" 动作
    } catch (error) {
        console.log(error);
    }
}

export function* diarySaga() {
    yield takeLatest("diary/addEntry", addDiarySaga);
    yield takeLatest("diary/getEntry", getDiarySaga);
}

关键修复点说明 #

1. 将put(getDiary(entries))移到onSnapshot回调内部，确保每次Firestore数据更新时都能同步更新状态。
2. 每次处理快照时重新初始化entries数组，避免旧数据重复累积。
3. 使用fork和take管理监听任务，通过取消信号触发unsubscribe，防止内存泄漏。

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