React集成Firebase报错:auth(...).collection不是函数求助
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

