React+Firestore开发遇data.map非函数错误及白屏问题求助

问题现象 #

• Firestore数据库的删除、写入、修改操作均正常执行，但页面出现白屏
• 控制台抛出两个错误：
  1. Uncaught TypeError: data.map is not a function
  2. Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist. at wrappedSendMessageCallback

相关代码 #

Saved组件（报错关联代码） #

export default function Saved({ data, setData }) {

  function editData(id, newWord, newTranslate, newNote) {
    const editedDataList = async (card) => {
      if (id === card.id) {
        return {
          ...card,
          word: newWord,
          translate: newTranslate,
          note: newNote,
        };
      }
      let newFields = {
          word: newWord,
          translate: newTranslate,
          note: newNote,
      }
      await updateDoc(doc(db, "db-name", id), newFields);
      console.log(newFields)
      return card;
    };
    setData(editedDataList);
  } 
  const deletePost = async (id) => {
    await deleteDoc(doc(db, "db-name", id));
  };
  const dataList = data.map((card) => (
    <SavedData
      id={card.id}
      key={card.id}
      word={card.word}
      translate={card.translate}
      note={card.note}
      editData={editData}
      del={deletePost}
    />
  ));

  return (
    <div>
      <div className="sec-menu"></div>
      <div className="saved-inner">
        {data.length >= 1 ? (
          <div className="saved-list">{dataList}</div>
        ) : (
            <Link className="main-btn" to="/addcard">
              Add
            </Link>
        )}
      </div>
    </div>
  );
}

Menu.js代码 #

function Menu() {

  const [data, setData] = useState([]);
  
  useEffect(() => {
    const q = query(collection(db, "db-name"));
    const unsubscribe = onSnapshot(q, (querySnapshot) => {
      let wordsArr = [];
      querySnapshot.forEach((doc) => {
        wordsArr.push({ ...doc.data(), id: doc.id });
      });
      setData(wordsArr);
    });
    return () => unsubscribe();
  }, []);
  return (
    <div className="content">
      <AuthContextProvider>
        <Routes>
            <Route
              path="saved"
              element={<Saved data={data} setData={setData} />}
            />
          </Route>
        </Routes>
      </AuthContextProvider>
    </div>
  );
}
export default Menu;

问题分析与修复方案 #

1. data.map is not a function 错误修复 #

这个错误的核心是data被修改为非数组类型，导致无法调用map方法。问题出在Saved组件的editData函数中：你直接将一个异步函数赋值给了setData，而不是处理后的数组。

修改editData函数如下：

async function editData(id, newWord, newTranslate, newNote) {
  // 先更新Firestore数据库
  const newFields = {
    word: newWord,
    translate: newTranslate,
    note: newNote,
  };
  await updateDoc(doc(db, "db-name", id), newFields);
  
  // 再更新本地状态数组，保持data的数组类型
  setData(prevData => prevData.map(card => {
    if (id === card.id) {
      return { ...card, ...newFields };
    }
    return card;
  }));
}

修改后，setData接收的是处理后的数组，data始终保持数组类型，map方法即可正常执行。

2. Could not establish connection 错误处理 #

这个错误和你的React/Firestore代码逻辑无关，通常是浏览器扩展程序（如广告拦截、VPN类插件）干扰导致的。可以尝试：

• 禁用所有浏览器扩展后刷新页面
• 使用无痕模式打开页面测试
• 重启开发服务器

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