React集成Firebase认证与存储报default.auth is not a function错误求解

这是几个新手做Firebase集成时非常常见的叠加问题，逐点拆给你：

• 第一个踩的是JS多变量赋值的语法坑
  你在首次初始化分支写的var fire,storage = firebase.initializeApp(...) 有问题：JS里这种逗号分隔的多变量声明，只有最后一个变量会拿到赋值，前面的都是undefined。也就是说这行写完，fire是空值，storage拿到的是Firebase应用本身的实例，根本不是Storage服务的实例。
• 第二个是导出和调用的结构不匹配
  你最后写的export default {storage, fire}，是把两个属性打包成一个普通对象当默认导出。但你在登录页调用的时候，是import fire from './fire'之后直接写fire.auth()——相当于拿着这个打包的普通对象去调用auth方法，而这个方法根本不在这个对象上，自然就报“auth is not a function”。
• 第三个是导入逻辑混乱
  你在上传组件里同时写了import { storage } from "./firebase"和import fire from './fire'，两个路径如果指的是同一个配置文件的话，你的配置文件根本没有命名导出storage，这里拿到的storage是无效值，上传逻辑自然也跑不通。

把fire.js的逻辑重构下，把初始化流程拆清楚，别把app实例、auth实例、storage实例混在一个变量里：

import firebase from 'firebase';
import "firebase/auth";
import "firebase/storage";

// 先声明所有需要的实例变量
let app, auth, storage;

if (!firebase.apps.length) {
  // 首次初始化：拿到Firebase应用实例
  app = firebase.initializeApp({
    // 你的项目凭证配置填在这里
  });
} else {
  // 已有实例：直接复用
  app = firebase.app();
}

// 不管走哪个分支，都从app实例上取对应服务的实例
auth = app.auth();
storage = app.storage();

// 用命名导出，后续导入的时候不容易搞混
export { auth, storage, app };

把原来混乱的导入改成统一从fire.js拿需要的实例：

import React, { useState } from "react";
// 直接拿需要的命名导出就行
import { storage } from "./fire";

你原来写的上传逻辑、进度条计算、拿下载链接的部分都是对的，只要导入的storage是正确的Storage实例，上传功能就能正常运行。登录页的逻辑也同理，直接导入auth实例用就可以，不用再套一层fire.auth()的调用，报错自然就消失了。

小提示：你现在用的是Firebase v8的经典导入写法，如果后续跟着文档升级到v9的模块化写法，导入逻辑会有变化，但按上面的改完，你当前的项目版本完全可以正常跑通。

内容的提问来源于stack exchange，提问作者ifrah asif