Nuxt3中正确使用VueFire及Firestore集合调用错误排查

错误信息：Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

相关代码配置 #

Somepage.vue #

<script setup>
import {Timestamp} from "@firebase/firestore-types";
import {useCollection, useFirestore} from "vuefire";
import {collection} from "@firebase/firestore";


const db = useFirestore()

interface IUsers{
  id: string
  name: string,
  password: string,
  createdAt: Timestamp
}

const usersCollectionRef = collection(db, '/users-tmp')
const usersCollection = useCollection<IUsers>(usersCollectionRef)


console.log(usersCollection);
</script>

nuxt.config.ts #

vuefire: {
        auth: true,
        config: {
            apiKey: process.env.NUXT_API_KEY,
            authDomain: process.env.NUXT_AUTH_DOMAIN,
            projectId: process.env.NUXT_PROJECT_ID,
            appId: process.env.NUXT_APP_ID,
            storageBucket: process.env.NUXT_STORAGE_BUCKET,
            messagingSenderId: process.env.NUXT_MESSAGING_SENDER_ID
        }
    },
modules: [
    'nuxt-vuefire'
]

package.json #

"dependencies": {
    "@firebase/app-types": "^0.9.0",
    "firebase": "^10.3.0",
    "firebase-admin": "^11.10.1",
    "firebase-functions": "^4.4.1",
    "nuxt-vuefire": "^0.2.17",
    "vuefire": "^3.1.15"
  }

已尝试操作：从@firebase/firestore/lite导入collection，修改代码为const usersCollection = useCollection<IUsers>(collection(db, '/users-tmp'))，但错误依旧。

问题原因及解决步骤 #

1. 依赖版本不兼容
   nuxt-vuefire@0.2.17是适配VueFire v2的版本，而你安装的vuefire@3.1.15是v3版本，两者不兼容，这是核心问题。

2. 安装适配的依赖版本
   卸载现有不兼容包，安装适配Nuxt3的最新版本：

npm uninstall nuxt-vuefire vuefire
npm install vuefire nuxt-vuefire@latest

3. 修正导入方式
   VueFire v3中，collection需直接从vuefire导入，无需从@firebase/firestore或其lite版本导入，确保和内部初始化的Firestore实例兼容。修改Somepage.vue的导入部分：

<script setup>
import { Timestamp } from "firebase/firestore";
import { useCollection, useFirestore, collection } from "vuefire";

const db = useFirestore()

interface IUsers {
  id: string
  name: string,
  password: string,
  createdAt: Timestamp
}

// 集合路径不要带开头的斜杠
const usersCollectionRef = collection(db, 'users-tmp')
const usersCollection = useCollection<IUsers>(usersCollectionRef)

console.log(usersCollection);
</script>

4. 修正集合路径格式
   集合路径无需以/开头，直接写'users-tmp'即可，带斜杠会导致路径解析异常。

5. 清理不必要的依赖
   如果仅前端使用Nuxt3 + VueFire，@firebase/app-types、firebase-admin、firebase-functions这些依赖可以移除，避免版本冲突：

npm uninstall @firebase/app-types firebase-admin firebase-functions

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