将Firebase Cloud Firestore数据导出到项目中的其他文件

Question

我试图在其用户页面上显示我的用户的某些信息（例如名称），但是当我从Firestore中将其检索到一个文件中，然后将其导入用户页面文件中时，数据显示为“未定义”我不知道为什么。我正在使用Ionic React和TypeScript。

这是我的firebaseConfig.ts文件：

import * as firebase from 'firebase'

const config = {
 //config stuff
};

firebase.initializeApp(config);
const db = firebase.firestore();
db.settings({ timestampsInSnapshots: true });


export function setUpProfile() {

  var user = firebase.auth().currentUser;

  if (user != null) {
    db.collection('users').doc(user.uid).onSnapshot(doc => {
      var fn = doc.data()?.firstname;
      console.log(fn)
      return fn
    })

  }
  else {
    let error = "ej inloggad" as string
    return error

  }

}

这是用户页面文件“ Profile.tsx”

import { IonContent, IonGrid, IonIcon, IonLabel, IonRow, IonSegment, IonSegmentButton, IonText, IonToolbar } from '@ionic/react';
import { personCircleOutline } from 'ionicons/icons';
import React, { useState } from 'react';
import SettingsBtn from '../components/EditProfile';
import {setUpProfile} from '../firebaseConfig'


const Profile: React.FC = () => {

var fn = setUpProfile()
console.log(fn)

    return (
          <IonContent>
              <IonGrid>
          <IonRow>
            <IonIcon size="large" color="tertiary" icon={personCircleOutline}/>
            <IonText id='profcont'> </IonText>
          </IonRow>
          <SettingsBtn/>
         <IonRow>
           <IonToolbar>
         <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>
          <IonSegmentButton value="helper">
            <IonLabel>Helper</IonLabel>
          </IonSegmentButton>
          <IonSegmentButton value="receiver">
            <IonLabel>Receiver</IonLabel>
          </IonSegmentButton>
         </IonSegment>
         </IonToolbar>
         </IonRow>
         </IonGrid>
         </IonContent>
  );
  }

  export default Profile;