Javascript storageRef.child不是firebase中的函数

使用软件包将文件上载到Firebase时出现问题

收到的错误为未捕获（承诺中）类型错误：storageRef.child不是函数

首先，

firebase

作为

Layout.js

componentDidMount() {
  const app = import('firebase/app');
  const auth = import('firebase/auth');
  const database = import('firebase/firestore');
  const storage = import('firebase/storage');

  Promise.all([app, auth, database, storage]).then(values => {
    const firebase = getFirebase(values[0]);
    !this.isCancelled && this.setState({ firebase });
  });
}

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

export default FirebaseContext;

class Firebase {
  constructor(app) {
    app.initializeApp(config);

    /* Firebase APIs */
    this.app = app;
    this.storage = app.storage();

  // *** Storage API ***
  onboardStorage = () => this.storage;
}

let firebase;

function getFirebase(app, auth, database, storage) {
  if (!firebase) {
    firebase = new Firebase(app, auth, database, storage);
  }

  return firebase;
}

export default getFirebase;

<FileUploader
  accept="image/*"
  name="avatar"
  filename="operator_accreditation"
  storageRef={() => firebase.onboardStorage().ref(`${uid}/files`)}
  onUploadStart={this.handleUploadStart}
  onUploadError={this.handleUploadError}
  onUploadSuccess={this.handleUploadSuccess}
  onProgress={this.handleProgress}
/>

然后，

firebase

被添加为

props

，使用

React.createContext

将

函数作为

FirebaseContext.js

componentDidMount() {
  const app = import('firebase/app');
  const auth = import('firebase/auth');
  const database = import('firebase/firestore');
  const storage = import('firebase/storage');

  Promise.all([app, auth, database, storage]).then(values => {
    const firebase = getFirebase(values[0]);
    !this.isCancelled && this.setState({ firebase });
  });
}

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

export default FirebaseContext;

class Firebase {
  constructor(app) {
    app.initializeApp(config);

    /* Firebase APIs */
    this.app = app;
    this.storage = app.storage();

  // *** Storage API ***
  onboardStorage = () => this.storage;
}

let firebase;

function getFirebase(app, auth, database, storage) {
  if (!firebase) {
    firebase = new Firebase(app, auth, database, storage);
  }

  return firebase;
}

export default getFirebase;

<FileUploader
  accept="image/*"
  name="avatar"
  filename="operator_accreditation"
  storageRef={() => firebase.onboardStorage().ref(`${uid}/files`)}
  onUploadStart={this.handleUploadStart}
  onUploadError={this.handleUploadError}
  onUploadSuccess={this.handleUploadSuccess}
  onProgress={this.handleProgress}
/>

然后将其作为

Form.js

componentDidMount() {
  const app = import('firebase/app');
  const auth = import('firebase/auth');
  const database = import('firebase/firestore');
  const storage = import('firebase/storage');

  Promise.all([app, auth, database, storage]).then(values => {
    const firebase = getFirebase(values[0]);
    !this.isCancelled && this.setState({ firebase });
  });
}

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

export default FirebaseContext;

class Firebase {
  constructor(app) {
    app.initializeApp(config);

    /* Firebase APIs */
    this.app = app;
    this.storage = app.storage();

  // *** Storage API ***
  onboardStorage = () => this.storage;
}

let firebase;

function getFirebase(app, auth, database, storage) {
  if (!firebase) {
    firebase = new Firebase(app, auth, database, storage);
  }

  return firebase;
}

export default getFirebase;

<FileUploader
  accept="image/*"
  name="avatar"
  filename="operator_accreditation"
  storageRef={() => firebase.onboardStorage().ref(`${uid}/files`)}
  onUploadStart={this.handleUploadStart}
  onUploadError={this.handleUploadError}
  onUploadSuccess={this.handleUploadSuccess}
  onProgress={this.handleProgress}
/>

const-uid
是
auth.uid

添加
控制台
消息表示上载文件时不会触发任何消息

选择文件后会发生错误，表明问题出现在
文件上载程序的
storageRef
上。我做了什么错事使
未捕获（承诺中）类型错误：storageRef.child不是一个函数
？
我刚刚遇到了一个类似的问题。问题是您将函数作为storageRef属性传递给文件上载程序。相反，您应该像下面这样直接传递storageRef对象：

<FileUploader
  accept="image/*"
  name="avatar"
  filename="operator_accreditation"
  storageRef={firebase.onboardStorage().ref(`${uid}/files`)}
  onUploadStart={this.handleUploadStart}
  onUploadError={this.handleUploadError}
  onUploadSuccess={this.handleUploadSuccess}
  onProgress={this.handleProgress}
/>