无法以VueJs中的计算返回Firestore值

Question

我正在尝试显示存储在Firestore中的值。

<p class="font-semibold">{{ user_displayName }}</p


export default {
   name: "the-navbar",
data() {
return {
name:''
}
},
computed:{
user_displayName() {

           const u = firebase.auth().currentUser;


           firebase
           .firestore()
           .collection('Colleges')
           .doc(u.uid)
           .onSnapshot(function(doc) {

             this.name=doc.data().displayName
             console.log(this.name)

            });
           console.log(this.name)

           return this.name
       },
}

没有返回值或错误，并且仅第一个console.log正在显示数据（名称）。