【初心者です】Firebaseに保存されているデータをHTMLに表示させたい

解決したいこと

FirebaseとVue.jsを使ってWebアプリを制作しています。
FirebaseのAuthenticationでログイン機能を実装しました。
またユーザの新規登録機能も実装し、RealTimeDataBaseにユーザ名が保存されています。
この保存されているユーザ名をHTMLに表示させたいのですが、どうしてもエラーが出てしまいます。
初歩的ミスだと思うのですが、２日くらいハマっています。

発生している問題・エラー

下記の画像は「user」という名前でログインしています。
本当は【現在は「user」でログインしています。】と表示したいのですが、下記の画像のようになってしまいます。

該当するソースコード

<!-- HTML -->
<div class="get-user-name"></div>

// JavaScript
const getUserName = () => {
    firebase
        .database()
        .ref(`users/${currentUID}`)
        .on('value', (snapshot) => {
            console.log(snapshot.val());
            $('.get-user-name').text('現在は「' + snapshot.val() + '」でログインしています。');
        });
};

*** Firebaseの中身はこんな感じです ***

アプリ名
　 ↳ users
　　 ↳ ユーザID
　　　 ↳ userName: "user"
　　 ↳ ユーザID
　　　 ↳ userName: "user1"

自分で試したこと

const getUserNameの中に、console.log(snapshot.val());を書いてみました。
実行結果は下の画像のとおりです。

「userName: "user"」とあるので、Firebase内のユーザ名は取得できているようです。
しかし、この「user」を表示できなくて悩んでいます。