Как получить данные Firebase после каждого обновления с React.useEffect?

Question

У меня есть базовый todoapp, подключенный к firebase. База данных представляет собой массив строк. Я могу читать, добавлять и удалять задачи в базе данных.

Однако после каждого обновления (добавления или удаления) происходит сбой приложения, поскольку функция get () в моем useEffect получает пустой ключ .proto, который обычно заполняется запрошенным массивом. Как исправить этот код?

import React from "react";
import firebase from "./firebase";

export default function App() {
  const [todos, setTodos] = React.useState([]);
  var db = firebase.firestore();

  React.useEffect(() => {
    db.collection("todos")
      .doc("1")
      .onSnapshot(async res => {
        const data = await res._document.proto.fields.todos.arrayValue.values;
        setTodos(data.map(e => e.mapValue.fields.stringValue));
      });
  }, [db]);

  const addTodo = () => {
    const data = {
      todos: [...todos, { stringValue: "scroll stackoverflow" }]
    };
    db.collection("todos")
      .doc("1")
      .set(data);
  };

  const removeTodo = name => {
    const data = {
      todos: todos.filter(todo => todo.stringValue !== name)
    };
    db.collection("todos")
      .doc("1")
      .set(data);
  };

  return (
    <>
      <button onClick={() => addTodo()}>add</button>
      {todos &&
        todos.map((todo, i) => {
          return (
            <div
              key={i}
              style={{ cursor: "pointer" }}
              onClick={() => removeTodo(todo.stringValue)}
            >
              {todo.stringValue}
            </div>
          );
        })}
    </>
  );
}

Структура базы данных: это коллекция с именем "todos" => документ с именем "1" => массив "todos", который содержит строки.