Firebase logs "undefined" on console when it should not

Question

I am using firebase 10.9.2 (Latest version)

I use the onValue function to go through the data in my live database. For some reason, it always logs (and is set to) undefined.

Due to how fast firebase evolves, I can not find a fix for this current issue. Please tell me what can I do with the code so that it stops returning undefined.

// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.8/firebase-app.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: "AIzaSyBU21edukO9sxUR13wYy6yYW9ZYK5ax4tM",
    authDomain: "team-seas-demo.firebaseapp.com",
    databaseURL: "https://team-seas-demo-default-rtdb.asia-southeast1.firebasedatabase.app",
    projectId: "team-seas-demo",
    storageBucket: "team-seas-demo.appspot.com",
    messagingSenderId: "864989587728",
    appId: "1:864989587728:web:7eda88906cd9a7fe659d95"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

import {getDatabase, ref, set, child, update, remove, onValue}
from "https://www.gstatic.com/firebasejs/9.6.8/firebase-database.js"; 

var db = getDatabase(app);

onValue(ref(db, "Groups/"), function (snapshot){
    const data = snapshot.val(); 
    console.log(data); //This part works, but returns the whole object

    console.log(data.GroupName) //This part returns undefined...
});

P.S: Yes, my rules on read are set to true

This is how my database looks: Image of database

Answer 1

I think it's better to use the onSnapshot() function See an example here https://firebase.google.com/docs/firestore/query-data/listen