Firestoreにデータが書き込めない、取得できない。

ソースコードを入力

import React, { useEffect } from "react";
import { useState } from "react";
import { useDispatchTodos , useTodos , FirestoreContext } from "../context/TodoContext";
import { collection, setDoc, addDoc, doc, deleteDoc, updateDoc, getDocs, onSnapshot } from 'firebase/firestore';
import { db, app, firestore} from "../firebase";
import { getFirestore } from 'firebase/firestore';
import firebase from "firebase/app"; // firebaseモジュールをインポート


const Form = () => {
    
    const dispatch = useDispatchTodos();
    const { todos, AddTodos, fetchTodos, 
            enteredTodo, setEnteredTodo,
            fireTodo, setFireTodo
    } = useTodos();
   
    const addTodo = () => {
        const newTodo = {
            id: Math.floor(Math.random() * 1e5),
            content: fireTodo,
        };
        dispatch({ type: "todo/add", todo: newTodo, editing: false });
        setFireTodo("");
        AddTodos();
    }

    const allComplete = () => {
        const neoTodo = {
            completed: true
        };
        dispatch({type: "todo/reset", todo: neoTodo, editing: false });   
    }

    // useEffect(() => {
    //     fetchTodos(firestore, dispatch);
    // })

    // const addTask = () => {
    //     const neoTodo7 = {
    //         id: Math.floor(Math.random() * 1e5),
    //         content: enteredTodo,
    //     };
    //     dispatch({type: "SET_TODOS", todo: neoTodo7, editing: false});
    //     setEnteredTodo("");
    // }
    
    return(
        <div>  
            <input type="text" value={fireTodo} id="task" name="task" 
            onChange={(e) => setFireTodo(e.target.value)}/>
                <div className="flex-box">
                    <button className="add" onClick={() => addTodo()}>
                        <div className="plus">
                            <span className="gif1"></span>
                            <span className="gif2"></span>
                        </div>
                    </button>
                    <button className="reset2" onClick={() => allComplete()}>
                        <div className="reset">
                            <img src="/icon_007476_32.png" alt="reset"></img>
                        </div>
                    </button>
                </div>       
        </div>

    );
       
}

export default Form;

import React, { useMemo } from "react";
import { createContext, useContext, useReducer, useState, useEffect } from "react";
import { db, app, firestore} from "../firebase";
import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore';
import { getDatabase , ref, get, onValue } from "firebase/database";
import { collection, setDoc, addDoc, doc, deleteDoc, updateDoc, getDoc, onSnapshot } from 'firebase/firestore';
import firebase from "firebase/app"; // firebaseモジュールをインポート
import firebaseConfig from "../firebase";
// import 'firebase/firestore'; // Firestoreをインポート
// import 'firebase/database'; // Realtime Databaseをインポー

 const TodoContext = createContext();
 const TodoDispatchContext = createContext();
 
 const todoReducer = (todos, action) => {

    switch (action.type) {
      case 'todo/add':
        return [...todos, action.todo];
      case 'todo/delete':
        return todos.filter(todo => todo.id !== action.todo.id);
      case 'todo/update':
        return todos.map(_todo =>
          _todo.id === action.todo.id ? { ..._todo, ...action.todo } : { ..._todo }
        );
      case 'todo/complete':
        return todos.map(todo =>
          todo.id === action.todo.id ? { ...todo, ...action.todo } : { ...todo }
        );
      case 'todo/reset':
        return todos.filter(todo => null); // ここは正しくないので修正が必要

      case 'todo/reserve':
        return todos.map(_todo =>
          _todo.id === action.todo.id
            ? { ..._todo, editingLock: true }
            : { ..._todo, editingLock: false }
        );
      case 'todo/reserveColor':
        return todos.map(_todo =>
          _todo.editingDateTime
            ? { ..._todo, editingColor: true }
            : { ..._todo, editingColor: false }
        );
      case 'todo/editingDateTime':
        return todos.map(_todo =>
          _todo.editingLock
            ? { ..._todo, editingDateTime: true }
            : { ..._todo, editingDateTime: false }
        );
      case 'SET_TODOS':
        return action.payload;

      default: 
        return todos;
    }
  };

 

 const TodoProvider = ({ children }) => {
  const todoList = useMemo(() => [
    {
      id: 1,
      content: "Make a restaurant reservation",
      editing: false,
      completed: false,
      reserve: false,
      editingLock: false,
      editingColor: false,
      editingDateTime: false
    },
    {
      id: 2,
      content: "send a letter",
      editing: false,
      completed: false,
      reserve: false,
      editingLock: false,
      editingColor: false,
      editingDateTime: false
    },
    {
      id: 3,
      content: "buy flowers",
      editing: false,
      completed: false,
      reserve: false,
      editingLock: false,
      editingColor: false,
      editingDateTime: false
    },
  ], []);
  

 
    const [ todos, dispatch ] = useReducer(todoReducer, todoList);
    const [modalOpen, setModalOpen ] = useState(false);
    const [selectedDate, setSelectedDate] = useState(new Date());
    const [isDateSet, setIsDateSet] = useState(false);
    const [isDateChecked, setIsDateChecked] = useState(false);
    const [isTimeChecked, setIsTimeChecked] = useState(false);
    const [isContainerDateCheck, setContainerDateCheck] = useState(false);
    const [isContainerTimeCheck, setContainerTimeCheck] = useState(false);
    const [selectedTime, setSelectedTime] = useState("12:00");
    const [isTimeSet, setIsTimeSet] = useState(false);
    const [displayTimePicker, setDisplayTimePicker] = useState(false);
    const [displayDatePicker, setDisplayDatePicker] = useState(false);
    const [loading, setLoading] = useState(true);
    const [enteredTodo, setEnteredTodo] = useState(""); 
    const [fireTodo, setFireTodo] = useState("");

   
  
      const firebaseApp = initializeApp(firebaseConfig);
      const firestore = getFirestore(firebaseApp);
  
      const newTask = useMemo(() => ({
            title: "newTask",
            description: "todoリストの保存",
            type: "string",
            content: "ユーザーが入力したタスク",
            editing: false,
            completed: false,
            reserve: false,
            editingLock: false,
            editingColor: false,
            editingDateTime: "12:00"
          }), []

  //この関数が上手く機能しません　☟

   
         useEffect(() => {
            const fetchData = async () => {
              const todoCollectionRef = collection(firestore, 'todoList');
            
              try { 
                await addDoc(todoCollectionRef, newTask); 
                const docRef = doc(firestore, 'content')   
                const snapshot = await getDoc(docRef);
                if(snapshot.exists()) {
                  console.log(snapshot.data()) // <- 修正
                }
                const todosData = [snapshot.data()]; // <- 修正
                dispatch({ type: 'todo/add', payload: todosData });
                console.log('Todos added to Firestore Successfully');
            
                const unsubscribe = onSnapshot(todoCollectionRef, (snapshot) => {
                  const todosData = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
                  dispatch({ type: 'SET_TODOS', payload: todosData });
                  console.log('Todos updated in Firestore');
                });
                
                return () => unsubscribe();
              } catch (error) {
                console.error('Error adding todoList to Firestore:', error);
              }
            }; 
            fetchData();
          }, [firestore, newTask, todoList]);
             
    
    
      
        //Todo追加
        const AddTodos = () => {
          try {
            // マップされた todoList を Firestore に追加
            (todoList.map(async todo => {    
              const todoCollection = collection(firestore, 'todoList');
              const newTodoRef =  addDoc(todoCollection, { content: todo.content, completed: false });
              const dataTodo = { id: newTodoRef.id, content: todo.content, completed: false }; 
              dispatch({ type: 'todo/add', todo: dataTodo, editing: false });
            }));

            console.log('Todos added to Firestore successfully');
          } catch (error) {
            console.error('Error adding todoList to Firestore:', error);
          }
        };





  
        


      // Todo削除
      const deleteTodo = async todoId => {
        const todoDocRef = doc(firestore, 'todoList', todoId);
        await deleteDoc(todoDocRef);
        dispatch({ type: 'todo/delete', payload: todoId });
      };
    
      // Todo更新
      const updateTodo = async (todoId, updatedFields) => {
        const todoDocRef = doc(firestore, 'todoList', todoId);
        await updateDoc(todoDocRef, updatedFields);
        dispatch({ type: 'todo/update', payload: { id: todoId, updatedFields } });
      };
      // Todoリセット
      const resetTodo = async (todoId, updatedFields) => {
        const todoDocRef = doc(firestore, 'todoList', todoId);
        await updateDoc(todoDocRef, updatedFields);
        dispatch({ type: 'todo/reset', payload: { id: todoId, updatedFields } });
      };
      // タイマー予約
      const reserveTodo = async (todoId, updatedFields) => {
        const todoDocRef = doc(firestore, 'todoList', todoId);
        await updateDoc(todoDocRef, updatedFields);
        dispatch({ type: 'todo/reserve', payload: { id: todoId, updatedFields } });
      };
      // Todo予約色
      const reserveColor = async (todoId, updatedFields) => {
        const todoDocRef = doc(firestore, 'todoList', todoId);
        await updateDoc(todoDocRef, updatedFields);
        dispatch({ type: 'todo/reserveColor', payload: { id: todoId, updatedFields } });
      };
      // Todo日時編集
      const editingDateTime = async (todoId, updatedFields) => {
        const todoDocRef = doc(firestore, 'todoList', todoId);
        await updateDoc(todoDocRef, updatedFields);
        dispatch({ type: 'todo/editingDateTime', payload: { id: todoId, updatedFields } });
      };
    
    const handleDateChange = (date) => {
        setSelectedDate(date);
        setIsDateSet(true);
        console.log(selectedDate)
    }

    const handleTimeChange = (event) => {    
        setSelectedTime(event.target.value);
        setIsTimeSet(true)
        console.log(selectedTime)
      };
    
    // console.log(selectedDate)
    // console.log(selectedTime)
    return (
        <TodoContext.Provider value=
            {{ todos, handleDateChange, 
            isDateChecked, setIsDateChecked, isTimeChecked , setIsTimeChecked, 
            isContainerTimeCheck, setContainerTimeCheck, isContainerDateCheck, 
            setContainerDateCheck, modalOpen, setModalOpen, selectedDate, setSelectedDate,
            handleTimeChange, selectedTime, setSelectedTime,displayTimePicker, setDisplayTimePicker,
            displayDatePicker, setDisplayDatePicker, isDateSet, setIsDateSet, isTimeSet, setIsTimeSet,
            AddTodos, enteredTodo, setEnteredTodo, fireTodo, setFireTodo

            }}>
              
          <TodoDispatchContext.Provider value={dispatch}>    
              {children}   
          </TodoDispatchContext.Provider>
       </TodoContext.Provider>
    )

 }

 const useTodos = () => useContext(TodoContext);
 const useDispatchTodos = () => useContext(TodoDispatchContext);
 
 export { useTodos , useDispatchTodos , TodoProvider, getDoc };