如何将useReducer react js与firestore一起使用？它总是返回undifined

import React, { useEffect, useReducer } from 'react';
import firebase from 'firebase/app';
import 'firebase/firestore';

// 初始化Firebase
firebase.initializeApp({
  // 在这里添加你的Firebase配置信息
});

// 创建Firestore实例
const db = firebase.firestore();

// 定义reducer函数
const reducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_DATA':
      return { ...state, loading: true };
    case 'FETCH_SUCCESS':
      return { ...state, loading: false, data: action.payload };
    case 'FETCH_ERROR':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
};

const initialState = {
  loading: false,
  data: null,
  error: null,
};

const MyComponent = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    const fetchData = async () => {
      dispatch({ type: 'FETCH_DATA' });

      try {
        const snapshot = await db.collection('yourCollection').get();
        const data = snapshot.docs.map(doc => doc.data());

        dispatch({ type: 'FETCH_SUCCESS', payload: data });
      } catch (error) {
        dispatch({ type: 'FETCH_ERROR', payload: error.message });
      }
    };

    fetchData();
  }, []);

  if (state.loading) {
    return <div>Loading...</div>;
  }

  if (state.error) {
    return <div>Error: {state.error}</div>;
  }

  return (
    <div>
      {state.data && state.data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default MyComponent;