React+Firestore：不使用hooks如何从onSnapshot返回数据？

问题核心在于onSnapshot和getDocs的工作逻辑完全不同：

• getDocs是一次性异步请求，可以通过await拿到结果后直接返回；
• onSnapshot是实时监听回调机制，Firestore会在数据初始加载、后续变更时自动触发回调函数，你在回调里的return aircraftData根本无法被外部获取——因为这个回调是Firestore内部调用的，不是给你的函数提供返回值用的。

你的当前函数只返回了取消订阅的方法，但没有把监听得到的数据传递到组件中，正确的做法是结合React的状态管理来实现：

方案1：组件内直接实现监听 #

import { useState, useEffect } from 'react';
import { query, orderBy, onSnapshot } from 'firebase/firestore';
import { aircraftCollection } from './your-firestore-config';

function AircraftComponent() {
  const [aircraftData, setAircraftData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const q = query(aircraftCollection, orderBy('series', 'asc'));
    // 开启监听，返回取消订阅函数
    const unsubscribe = onSnapshot(q, (snapshot) => {
      const data = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }));
      setAircraftData(data);
      setLoading(false);
    }, (error) => {
      // 处理监听错误
      console.error('监听失败:', error);
      setLoading(false);
    });

    // 组件卸载时取消订阅，避免内存泄漏
    return unsubscribe;
  }, []);

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

  return (
    <div>
      {aircraftData.map(aircraft => (
        <div key={aircraft.id}>{aircraft.series}</div>
      ))}
    </div>
  );
}

方案2：封装成自定义Hook（复用性更高） #

import { useState, useEffect } from 'react';
import { query, orderBy, onSnapshot } from 'firebase/firestore';
import { aircraftCollection } from './your-firestore-config';

function useAircraftSnapshot() {
  const [aircraftData, setAircraftData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const q = query(aircraftCollection, orderBy('series', 'asc'));
    const unsubscribe = onSnapshot(q, 
      (snapshot) => {
        const data = snapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }));
        setAircraftData(data);
        setLoading(false);
        setError(null);
      },
      (err) => {
        setError(err);
        setLoading(false);
      }
    );

    return unsubscribe;
  }, []);

  return { aircraftData, loading, error };
}

// 使用自定义Hook的组件示例
function AircraftList() {
  const { aircraftData, loading, error } = useAircraftSnapshot();

  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载出错: {error.message}</div>;

  return (
    <ul>
      {aircraftData.map(aircraft => (
        <li key={aircraft.id}>{aircraft.series}</li>
      ))}
    </ul>
  );
}

关键说明： #

1. 用useState存储监听得到的数据，每次回调触发时调用setAircraftData更新状态，驱动组件重新渲染；
2. 用useEffect管理订阅生命周期：组件挂载时开启监听，卸载时调用unsubscribe取消订阅，避免内存泄漏；
3. 加入loading和error状态，提升用户体验和错误处理能力。

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