firebase не определен при доступе к firebase.myFun c () в другом файле; я использую обертки неправильно?

Question

Я пытаюсь написать Router Link, которая выполняет функцию в моей базе данных. js file onClick.

Мой ожидаемый результат - ссылка, перенаправляющая меня, пока функция выполняет this.auth.signOut(); в моей Firebase класс.

Вместо этого я получаю:

TypeError: Cannot read property 'doSignOut' of undefined
NavigationAuth

Я пытался читать документацию re: Context , но у меня все еще есть вопросы. Моя конструкция имитирует другой файл, где идентичный код выполняет требуемую операцию. Я надеюсь, что кто-то исправит мое недопонимание React в комментариях.

Вот часть навигации. js, откуда исходит ошибка:

[irrelevant imports]
import { withFirebase } from "./Firebase";

class Navigation extends Component {
    [irrelevant component info]
}

// here is where I need help

const NavigationAuth = ({ firebase }) => (
    <ul>
        <li> 
            <Link to={ROUTES.LANDING} onClick={firebase.doSignOut}>
                Sign Out
            </Link>
            <SignOutButton />
        </li>
    </ul>
);
const NavigationNonAuth = () => (
    [irrelevant code]
);

[...snipped out mapStateToProps and mapDispatchToProps...]
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withFirebase(Navigation));

А вот файл, экспортирующий оболочку {withFirebase}:

context. js

import React from "react";

const FirebaseContext = React.createContext(null);

export const withFirebase = Component => props => (
    <FirebaseContext.Consumer>
        {firebase => <Component {...props} firebase={firebase} />}
    </FirebaseContext.Consumer>
);

export default FirebaseContext;

Насколько я понимаю, оболочка withFirebase, созданная в контексте. js делает доступной "firebase" для использования в любом файле, где обертка используется для экспорта компонента. Поэтому, когда я делаю export default withFirebase(Navigation) в Navigation. js, оболочка позволяет мне сказать { firebase }, как в const NavigationAuth = ({ firebase }) => .... Это неправильно?

Я не понимаю, как это может быть нефункционально, когда я скопировал компонент SignOutButton, где onClick={firebase.doSignOut} работает:

SignOut. js:

import React from "react";
import { withFirebase } from "../Firebase";

const SignOutButton = ({ firebase }) => (
    <button type="button" onClick={firebase.doSignOut}>
        Sign Out
    </button>
);

export default withFirebase(SignOutButton);

В этом SignOut.js файле функция onClick работает, поэтому, пожалуйста, объясните, почему она не работает в другом файле ...

I ' m копирование (a) оболочки withFirebase, (b) ввода {firebase} в компонент и (c) фактического свойства onClick. Так почему это не работает?

(Я много раз осматривал Google и SO; пролистал несколько страниц, не найдя ответа.)

Спасибо всем, кто читает мой длинный пост.