求助解决Firebase报错：Uncaught FirebaseError: Expected type 'Ea'类型不匹配

错误原因 #

你这个错误是因为同时混用了Firebase Firestore的精简版（lite）和完整版SDK，导致API对象类型不兼容。代码里collection、orderBy从firebase/firestore/lite导入，而query、onSnapshot从firebase/firestore导入，两个版本的模块无法交叉使用。

解决方案 #

统一Firestore API的导入来源，二选一即可：

方案1：全用Firestore精简版（适合前端轻量场景） #

将所有Firestore相关API都从精简版导入：

import React, { useEffect, useState } from "react";
// 统一从lite导入所有Firestore API
import { collection, orderBy, query, onSnapshot } from "firebase/firestore/lite";
import { db } from "../firebase";

const ImageGrid = () => {
  const [docs, setDocs] = useState([]);
  const colRef = collection(db, 'gallery');

  const dateQuery = query(colRef, orderBy("createdAt", "desc"));

  const getData = () => {
    onSnapshot(dateQuery, (snap) => {
      let documents = [];
      snap.docs.forEach((doc) => {
        documents.push({ ...doc.data(), id: doc.id });
      });
      console.log(documents);
      setDocs(documents);
    });
  };
  
  // useEffect(() => {
  //   getData();
  // }, []);
  return (
    <div className='img-grid'>
      <button onClick={getData}>Get Images</button>
      images
    </div>
  )
}

export default ImageGrid

方案2：全用Firestore完整版（需要高级功能时选择） #

将所有Firestore相关API都从完整版导入：

import React, { useEffect, useState } from "react";
// 统一从完整版导入所有Firestore API
import { collection, orderBy, query, onSnapshot } from "firebase/firestore";
import { db } from "../firebase";

const ImageGrid = () => {
  const [docs, setDocs] = useState([]);
  const colRef = collection(db, 'gallery');

  const dateQuery = query(colRef, orderBy("createdAt", "desc"));

  const getData = () => {
    onSnapshot(dateQuery, (snap) => {
      let documents = [];
      snap.docs.forEach((doc) => {
        documents.push({ ...doc.data(), id: doc.id });
      });
      console.log(documents);
      setDocs(documents);
    });
  };
  
  // useEffect(() => {
  //   getData();
  // }, []);
  return (
    <div className='img-grid'>
      <button onClick={getData}>Get Images</button>
      images
    </div>
  )
}

export default ImageGrid

额外注意 #

如果后续用useEffect调用getData，记得添加监听清理逻辑避免内存泄漏：

useEffect(() => {
  const unsubscribe = onSnapshot(dateQuery, (snap) => {
    let documents = [];
    snap.docs.forEach((doc) => {
      documents.push({ ...doc.data(), id: doc.id });
    });
    setDocs(documents);
  });
  return unsubscribe; // 组件卸载时取消快照监听
}, []);

内容的提问来源于stack exchange，提问作者Oluwagbemiga Sunday Stephen