TypeError: null is not an object(evaluating 'document.querySelector..が出ないようにしたい

Question

＜最終的にやりたいこと＞
FireStore上のデータベースに対して検索をかけ、検索結果を一覧で取得したい

＜今回のつまずき＞
以下のサイトを参考にFireStoreからデータを参照したかったのですが
何もレンダリングされません。

[Firebase] Firestoreで読み書きする (Web編)

Javaコンソールを見ると
TypeError: null is not an object (evaluating 'document.querySelector("#readData").addEventListener')
と表示されており

何故なのでしょうか、原因と対策についてお分かりになる方ご教示いただけますと幸いです。

<template>
  <div>
   <button id="readData" type="button">参照</button>
  　<div id="msg">bbb</div>
  </div>
</template>

<script>
import firebase from '@/plugins/firebase'
import { firestoreAction } from 'vuexfire'

var db = firebase.firestore();
var LIST = [];  //ID保管用

export default {
}

/**
     * データの参照
     **/
  document.querySelector("#readData").addEventListener("click", ()=>{
    db.collection("payments").get().then((querySnapshot) => {
      var buff = [];
      var html = "<ul>";
      querySnapshot.forEach((doc) => {
        var data = doc.data();
        html += `<li>${doc.id} => ${data.name}, ${data.point}</li>`;
        buff.push(doc.id);
      });
      html += "</ul>";
      LIST = buff;
      showMessage(html);
    })
    .catch((error)=>{
    showMessage(`データの取得に失敗しました (${error})`);
  });
});
/**

* 実行結果の表示
**/
function showMessage(str){
  var msg = document.querySelector("#msg");
    msg.innerHTML = str;
    msg.style.display = "block";
  }
</script>

plugins/firebase.js

import firebase from 'firebase'
import 'firebase/firestore'

const config = {
  projectId: process.env.FIREBASE_PROJECT_ID
}

if (!firebase.apps.length){
  firebase.initializeApp(config)
}

export default firebase

Comments

[Orlofsky]

URLは https://teratail.com/help/question-tips#questionTips3-7 の [リンク] で [リンク先の説明](http...) に修正してください。

Answer 1

google翻訳
TypeError: nullはオブジェクトではありません（ 'document.querySelector（ "＃readData"）。addEventListener'を評価しています）

はやいはなしが、document.querySelector（ "＃readData"）がnullなんで、addEventListenerってのが意味不明、とおっしゃってます。

そこらへん確認してみよう

Comments

[mannnakakunn]

ご回答ありがとうございます。
document.querySelector（ "＃readData"）がnullになるのは何故なのでしょうか。

tenplateの中で
<button id="readData" type="button">参照</button>
としているのでnullにならない気がしているのですが。。すいません。理解不足で。。