Firebase 身份验证预期的“onClick”侦听器是一个函数，而不是一个“object”类型的值答案

【问题标题】：Firebase Authentication Expected `onClick` listener to be a function, instead got a value of `object` typeFirebase 身份验证预期的“onClick”侦听器是一个函数，而不是一个“object”类型的值
【发布时间】：2019-05-29 20:02:51
【问题描述】：

在我的 React 项目上设置 Firebase 身份验证期间。我无法在按钮单击时触发 Auth Pop up 触发器。

单击按钮后在控制台内引发错误或刷新页面后自动打开身份验证（预期 onClick 侦听器是一个函数，而不是 object 类型的值。）

// Initialize Firebase
import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
const config = {
  apiKey: "myKeyHere",
  authDomain: "domain",
  databaseURL: "url",
  projectId: "idb",
  storageBucket: "bucket",
  messagingSenderId: "id"
};
firebase.initializeApp(config);
export const firestore = firebase.firestore();
export const auth = firebase.auth();

export const provider = new firebase.auth.GoogleAuthProvider();
export const signInWithGoogle = () => auth.signInWithPopup(provider);

const settings = { timestampsInSnapshots: true };
firestore.settings(settings);

export default firebase;

这是我的组件：

import React, { Component } from "react";
import { connect } from "react-redux";
import signInWithGoogle from "../../firebase";

    class Header extends Component {
      constructor(props) {
        super(props);
      }
      render() {
        console.log(this.props);
        return (
          <nav className="header">
            <button onClick={signInWithGoogle}>Sign in</button>
          </nav>
        );
      }
    }
    const mapStateToProps = state => state;

    export default connect(mapStateToProps)(Header);

如您所见，登录按钮应触发 Firebase 的 signInWithGoogle 箭头功能，但它会在单击时引发错误。

【问题讨论】：

标签： reactjs firebase authentication firebase-authentication

【解决方案1】：

我认为问题在于您正在从“../../firebase”导入默认导出，即“firebase”而不是登录功能。

要解决这个问题，您只需在导入中添加大括号 {}，以便导入命名导出而不是默认导出：

import { signInWithGoogle } from "../../firebase";

【讨论】：