我是 ReactJS 的新手，正在构建一个费用应用程序。我有一个 Redux 商店来存储费用。

我已连接 Firebase 数据库，现在正尝试添加 Firebase 提供的 Google 身份验证。 这是我从 firebase.js 获得的 firebase 代码

import * as firebase from 'firebase';

const firebaseConfig = {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.FIREBASE_DATABASE_URL,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID
};

firebase.initializeApp(firebaseConfig);

const database = firebase.database();
const googleAuthProvider = new firebase.auth.GoogleAuthProvider();

export { firebase, database, googleAuthProvider as default };

行为在 auth.js 中定义

import { firebase, googleAuthProvider } from '../firebase/firebase';

export const startLogin = () => {
  return () => {
    return firebase.auth().signInWithPopup(googleAuthProvider);
  };
};

我尝试呈现的组件是 LoginPage.js

import React from 'react';
import { connect } from 'react-redux';
import { startLogin } from '../actions/auth';

export const LoginPage = ({ startLogin }) => {
    return (
        <div>
            <h2>Log in Page</h2>
            <button onClick={startLogin}>Log in here</button>
        </div>
    );
};

const mapDispatchToProps = (dispatch) => ({
    startLogin: () => dispatch(startLogin())
});

export default connect(undefined, mapDispatchToProps)(LoginPage);

我看到的错误是 TypeError：_firebase2.default.ref 不是函数 。当我使用控制台尝试查看错误出现的位置时，它位于另一个定义我的费用行为的文件，expenses.js

import { v1 as uuidv1 } from 'uuid';
import database from '../firebase/firebase';

export const addExpense = (expense) => {
    return {
        type: 'ADD_EXPENSE',
        expense: expense
    };
};

export const startAddExpense = ( expenseData = {} ) => {
    return (dispatch) => {
        const {
            description = '', 
            note = '', 
            amount = 0, 
            createdAt = 0
        } = expenseData;
        const expense = { description, note, amount, createdAt };

        return database.ref('expenses').push(expense).then((ref) => {
            dispatch(addExpense({
                id: ref.key,
                ...expense
            }));
        });
    };
};

export const removeExpense = ({ id } = {}) => {
    return {
        type: 'REMOVE_EXPENSE',
        id: id
    };
};

export const startRemoveExpense = ({ id } = {}) => {
    return (dispatch) => {
        return database.ref(`expenses/${id}`).remove()
        .then(() => {
            dispatch(removeExpense({ id }));
        });
    };
};

export const editExpense = (id, updates) => {
    return {
        type: 'EDIT_EXPENSE',
        id: id,
        updates: updates  
    };
};

export const startEditExpense = (id, updates) => {
    return (dispatch) => {
        return database.ref(`expenses/${id}`).update(updates)
        .then(() => {
            dispatch(editExpense(id, updates));
        });
    };
};

export const setExpenses = (expenses) => {
    return {
        type: 'SET_EXPENSES',
        expenses: expenses
    };
};

export const startSetExpenses = () => {
    return (dispatch) => {
        return database.ref('expenses')
        .once('value')
        .then((snapshot) => {
            const expenses = [];

            snapshot.forEach((obj) => {
                expenses.push({
                    id: obj.key,
                    ...obj.val()
                }); 
            });

            dispatch(setExpenses(expenses));
        });
    };
};

在将 connect 添加到 LoginPage 并简单显示它之前，应用程序可以正常工作。

附件是错误的屏幕截图： 单击错误来源后，这里是位置：