Focusing on this function:

function AddAllItemsToTable2(TheComments) {
    body2.innerHTML = "";
    TheComments.forEach(element => {
        AddItemsToTable2(element.movieComment);
    });
}

The TheComments object here is a Record<string, string>[]:

TheComments = [{
  "-Mstwhft8fKP6-M2MRIk": "comment",
  "-Mstwj5P2TD_stgvZL8V": "a comment",
  "-MstwjxvmkNAvWFaIejp": "another comment"
}]

When you iterate over this array, you end up with an element object that doesn't have a movieComment property, which is why when you feed it to AddItemsToTable2 you get undefined.

To fix this, you need to change the way you assemble the TheComments object:

function AddAllItemsToTable2(TheComments) { // TheComments: ({id: string, text: string})[]
    body2.innerHTML = "";
    TheComments.forEach(commentObj => AddItemsToTable2(commentObj.text));
}

function getAllDataOnce2() {
    const show = qs["movieId"];
    get(child(firebaseRef, 'Movies/' + show + '/movieComment'))
        .then((snapshot) => {
            const comments = [];
            snapshot.forEach(childSnapshot => {
                comments.push({
                    id: childSnapshot.key,     // store this for linking to database/anchors
                    text: childSnapshot.val()
                });
            });
            console.log(comments);
            AddAllItemsToTable2(comments);
        });
}

As another point, beware of XSS risks when using innerHTML and use innerText where possible for any user generated content. Also, you should wrap your comment content in a table row so comments are concatenated properly.

function AddItemsToTable2(commentObj) {
    const commentEle = document.createElement('span');
    commentEle.id = `comment_${commentObj.id}`;
    commentEle.innerText = commentObj.text;
    
    const commentRowHTML = `
            <tr>
              <td>Alan Smith</td>
              <td><i class="fa fa-star" style="color:rgb(91, 186, 7)"></i></td>
              <td>${commentEle.outerHTML}<h6>[May 09, 2016]</h6></td>
            </tr>`;
    body2.innerHTML += commentRowHTML;
}

function AddAllItemsToTable2(TheComments) {
    body2.innerHTML = "";
    TheComments.forEach(commentObj => AddItemsToTable2(commentObj));
}

With the above code block, you can now add #comment_-MstwjxvmkNAvWFaIejp to the end of the current page's URL to link to the "another comment" comment directly similar to how StackOverflow links to comments.