reactjs - default.auth(...).collection 不是函数

Question

编辑我的react.js代码后我开始收到此错误，但我无法摆脱它。检查了有关 firebase.auth 的其他一些页面不是函数错误，但那里的答案没有帮助。以“fire.auth...”开头的 main.js 文件开头出现错误

确切的错误消息:

TypeError: _config_Fire__WEBPACK_IMPORTED_MODULE_2__.default.auth(...).collection is not a function

我的 fire.js 代码

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

const config = { /* COPY THE ACTUAL CONFIG FROM FIREBASE CONSOLE */
    my config info here ...
};
const fire = firebase.initializeApp(config);
export default fire;

我的 main.js 文件出现错误:

import React, {useState,useEffect, useRef, useContext} from 'react'
import fire from '../config/Fire';
//import { UserConsumer } from  './UserContext.js';

//import {UserContext} from '../App'


function useTimes(){
  //const user2 = useContext(UserContext.Consumer)
    const [kullanici,setTimes] = useState([])
    useEffect(()=>{
      fire
            .auth()
            .collection('kullanici')
            .doc('gNfFy0uEsk5OvrZOfkGm')
            .onSnapshot((doc)=>{
                const newTimes = doc.data()
                setTimes(newTimes)
            })

    },[])

    return kullanici
}
function useInterval(callback, delay) {
    const savedCallback = useRef();

    // Remember the latest callback.
    useEffect(() => {
      savedCallback.current = callback;
    }, [callback]);

    // Set up the interval.
    useEffect(() => {
      function tick() {
        savedCallback.current();
      }
      if (delay !== null) {
        let id = setInterval(tick, delay);
        return () => clearInterval(id);
      }
    }, [delay]);
  }

const Main = () => {
  //console.log(firebase.auth().currentUser.uid)
    const kullanici =useTimes()
    let [count, setCount] = useState(0);
    //console.log(new Date().getTime())
    useInterval(() => {
        // Your custom logic here
        setCount(count + 1);
    }, 1000);
    return(
      <div>
        <div>
        <h2>Welcome {kullanici.nick}</h2>
        <li>Silver: <span>{kullanici.silver ? count * kullanici.silver : ''}</span></li>
        <li>Copper: <span id="count">{kullanici.silver ? count * kullanici.copper : ''}</span></li>
        <li>Iron: <span id="count">{kullanici.silver ? count * kullanici.iron : ''}</span></li>
        </div>
        </div>
    )
  }


export default Main

Answer 1

首先，您必须在 fire.js 文件中导入 firebase/auth。

并尝试使用 firebase/app 导入核心 firebase sdk。

// fire.js

import firebase from 'firebase/app';
import 'firebase/firestore'
import 'firebase/auth';

...

这将解决错误.auth is not a function。

最后，您尝试将 .collection() 链接到 auth() 上。如果您尝试从 Firestore 读取数据，则必须这样做:

// main.js

...

import fire from '../config/Fire';

...

fire
  .firestore()
  .collection('kullanici')

...