You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React集成Firebase报错:auth(...).collection不是函数求助

Fixing "TypeError: ...auth(...).collection is not a function" in React + Firebase

Hey there, let's get this error sorted out right away—I see exactly where the problem is!

The Core Issue

You’re trying to call collection() on a Firebase Auth instance, but that method belongs to Firestore (Firebase’s database service), not the Auth module. fire.auth() returns an object for user authentication tasks (like logging in/out, fetching user profiles), and it has no collection() method at all. You’ve mixed up the instances for two separate Firebase services.

Step-by-Step Fix

1. Clean up your Firestore setup (optional but recommended)

First, let’s update your fire.js to explicitly export the Firestore instance—this makes your code clearer and avoids confusion later:

import firebase from 'firebase';
import 'firebase/firestore'

const config = {
 /* Your Firebase config from the console */
};

const fire = firebase.initializeApp(config);
// Create and export the Firestore instance
const db = fire.firestore();

export { fire, db };
export default fire;

2. Correct the database call in main.js

In your useTimes hook, replace the incorrect fire.auth().collection(...) with a reference to the Firestore instance. You have two simple options:

Option 1 (using the exported db):

import React, {useState,useEffect, useRef} from 'react'
import { fire, db } from '../config/Fire'; // Import db here

function useTimes(){
 const [kullanici,setTimes] = useState([])
 useEffect(()=>{
 db // Use the Firestore instance for database operations
 .collection('kullanici')
 .doc('gNfFy0uEsk5OvrZOfkGm')
 .onSnapshot((doc)=>{
 const newTimes = doc.data()
 setTimes(newTimes)
 })
 },[])
 return kullanici
}

Option 2 (direct call without exporting db):

// Keep your existing import: import fire from '../config/Fire';
useEffect(()=>{
 fire.firestore() // Fetch the Firestore instance first
 .collection('kullanici')
 .doc('gNfFy0uEsk5OvrZOfkGm')
 .onSnapshot((doc)=>{
 const newTimes = doc.data()
 setTimes(newTimes)
 })
},[])

Quick Extra Check

Before testing, make sure you’ve enabled Firestore in your Firebase console—it’s disabled by default when you create a new project. If it’s still off, you’ll hit another error even after fixing this one!

内容的提问来源于stack exchange,提问作者Faruk

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.14 08:21:32