Firebase 身份验证预期 `onClick` 侦听器是一个函数，而是获得了一个 `object` 类型的值

Question

在我的 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 箭头函数，但它会在 onClick 中引发错误。

Answer 1

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

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

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