Экспорт данных Firebase Cloud Firestore в другой файл в проекте

Question

Я пытаюсь показать некоторую информацию от моих пользователей (например, имя) на их странице пользователя, но когда я получаю ее из своего Firestore в одном файле, а затем импортирую ее в файл страницы пользователя, данные отображаются как "неопределенные" и я не могу понять, почему. Я использую Ioni c 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;