typescript 未捕获(在承诺中)TypeError：无法读取未定义的属性||从Firestore获取单个文档时出错

elcex8rz 于 2022-12-01 发布在 TypeScript

关注(0)|答案(1)|浏览(122)

我失去了所有的希望，因为一切似乎都没有意义.（对我来说）在这个阶段了。我都很好得到一个项目的集合，并做什么需要做的与它。但当fecting一个单一的文件，我得到各种各样的麻烦。一直试图添加/删除。数据（）在变量的属性/结尾之间，使用test.vue中的函数和useProfiles TypeScript中的函数......似乎没有任何效果。我要么得到“未定义”、或不能访问属性的对象本身未准备好被调用。
我还深入研究了文档并使用了这些示例，但没有结果...

我有三个文件：
useProfile.ts

import { ref } from 'vue'
import { useUserSession } from "/@src/stores/userSession";
import { Profile } from "/@src/types/profile";

import {
    getFirestore,
    onSnapshot,
    doc,
} from "firebase/firestore";
  
const db = getFirestore();
const userSession = useUserSession();
const uid = userSession.uid

export const profile = ref<Profile>();

export const getProfile = async (id) => {
    const unsub = onSnapshot(doc(db, "profiles", id), (profile) => {
        console.log("Profile Retrieved Successfully : ", profile.id, " => ", profile.data());
        profile.value = profile
    });
}

getProfile(uid);

profile.ts

export type Profile = {
  images: {
    avatar: string;
  },
  personal: {
    nameFirst: string;
    nameLast: string;
  },
  professional : {
    cluster: string;
  },
}

test.vue

<script setup lang="ts">

import { useViaPlaceholderError } from '/@src/composable/useViaPlaceholderError'
import { profile } from "/@src/composable/useProfiles";

</script>

<template>
  <div class="column is-one-fifth" >
    <img
        class="project-avatar"
        :src="profile.images.picture"
        alt=""
        @error.once="(event) => useViaPlaceholderError(event, '150x150')"
      />
      <h3>{{ profile.personal.nameFirst }} {{ profile.personal.nameLast }}</h3>
      <p>{{ profile.professional.cluster }}</p>
      <progress class="progress is-primary is-tiny" value="31" max="100">
        31%
      </progress>
  </div>
</template>

typescript

来源：https://stackoverflow.com/questions/74585838/uncaught-in-promise-typeerror-cannot-read-properties-of-undefined-errors-g

1条答案

按热度按时间

pb3skfrl1#

即使在远离使用多个文件并使我的生活（在未来）更容易，并直接将所有内容转储到一个非常简单的vue文件/组件中之后，我仍然无法定义“myProfile”属性...

<script setup lang="ts">

import { ref , onMounted } from 'vue'
import { useUserSession } from "/@src/stores/userSession";
import { Profile } from "/@src/types/profile";

import {
    getFirestore,
    onSnapshot,
    collection,
    doc,
} from "firebase/firestore";
  
const db = getFirestore();
const userSession = useUserSession();
const userId = userSession.uid

const myProfile = ref({} as Profile);
const profiles = ref([]);
const profilesCollectionRef = collection(db, "profiles");

onMounted(() => {
 
    onSnapshot(profilesCollectionRef, (querySnapshot) => {
        const profilesHolder = [];
        querySnapshot.forEach((doc) => {
            const profile = {
                id: doc.id,
                ...doc.data(),
            }
            profilesHolder.push(profile);
            console.log(profile);
        });
        
        profiles.value = profilesHolder;
    });

    onSnapshot(doc(db, "profiles", userId), (doc) => {
        const newProfile = {
            id: doc.id,
            ...doc.data(),
        }
        myProfile.value = newProfile as Profile;
    });
    
})

</script>

<template>
    <LandingLayout theme="light">
        <div v-for="profile in profiles" class="mb-5">
            <a>{{profile.personal.nameFirst}}</a>
            <br>
            <a>{{profile.images.avatar}}</a>
        </div>

        <a>{{myProfile.personal.nameFirst}}</a>
    </LandingLayout>
</template>

赞(0）回复(0）举报 2022-12-01

我来回答

typescript 未捕获(在承诺中)TypeError：无法读取未定义的属性||从Firestore获取单个文档时出错

1条答案

相关问题

热门标签

最新问答