null判定を実装したい

現在、google bools apiを用いた本の検索と気になる（保管）機能の実装したサイトを制作しております。

現状できていること）
・検索を押して本を表示させること
・気になるボタンを押して、firebaseにidとtitleを保管すること
・気になるボタンのクリックイベントで画面上にはapi内のタイトルを気になるリストに表示する。firebaseにはapi内のタイトル・idデータを保管する
・削除ボタンを押して、api内のタイトルをリストから削除し、firebaseからはtitleとidを削除する

問題点）
・リスト中の最後の行を削除する際
「util.ts:596 Uncaught TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)
at main.js:29」
のエラーが出る

上記の問題点において、下記（Javascript　//null判定部分）のように書いているのですがうまく実行されません。
アドバイスを頂けると助かります。
よろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8"　>
5    <title>My Favorite Books</title>
6    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
7    <link rel="stylesheet" href="main.css">
8    <meta name="viewport" content="width=device-width,initial-scale=1.0">
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
10  </head>
11  <body>
12　<header>
13  </header>
14     <div class="container" id="app">
15      <h3 class="text-center">My Favorite Books</h3>
16      <form v-on:submit.prevent="getResult(query)">
17        <div id="input" class="input-group mx-auto col-lg-6 col-md-8 col-sm-12">
18            <input id="search-box" type="text" class="form-control" placeholder="検索文字を入力" v-model="query">
19            <button id="search" class="btn btn-primary" onclick="">検索</button>
20        </div>
21        <div class="hamburger-menu" id="favoshelf">
22        <input type="checkbox" id="menu-btn-check">
23        <label for="menu-btn-check" class="menu-btn"><span></span></label>
24        <div class="menu-content">
25            <ul>
26                <li>
27                　<p>気になるリスト</p>
28                </li>
29                  <li v-for="booksFav in booksFavs">
30                    　{{booksFav.title}}
31                    　<button v-on:click="removeFavorite(booksFav.id)" class="btn btn-light">削除</button>
32                  </li>
33            </ul>
34        </div>
35    　　</div>
36          <div class="book_wrapper">
37            <div class="book_card" v-for="item in items">
38              <div class="row no-gutters">
39                <div class="col-md-4">
40                  <img class="card-img" v-bind:src="item.volumeInfo.imageLinks?.thumbnail" />
41                </div>
42            　　
43                <div class="col-md-8">
44                  <div class="card-body">
45                    <h5 class="card-title">{{item.volumeInfo.title}}</h5>
46                    <p class="card-text">{{item.volumeInfo.authors}}</p> 
47                    <p class="card-text"><small class="text-muted">{{item.volumeInfo.publisher}}</small></p>    
48                  </div>
49                  <div class="book_button">
50                    <a v-bind:href="item.volumeInfo.previewLink" class="waves-effect waves-light btn" target="_blank">show detail</a>
51                  </div>
52                  <button v-on:click="addFavorite(item.id,item.volumeInfo.title)" class="btn btn-light">気になる</button>
53                </div>
54          </div>
55        </div>
56       </div>
57    </div>

Javascript
1/* jshint curly:true, debug:true */
2/* globals $, firebase */
3
4const vm = new Vue({
5  el: '#app',
6  data() {
7    return{
8      query:'',
9      items:[], //#apiから取得したデータを格納
10      booksFavs:[]
11    };
12  },
13  methods:{
14    getResult(query){
15      axios.get("https://www.googleapis.com/books/v1/volumes?q=search" + query).then(response => {
16        console.log(response.data);
17        this.items = response.data.items;
18        const bookDate =response.data?.items?.volumeInfo?.imageLinks?.thumbnail;
19          if(typeof bookDate == "undefined") {
20          console.log("未定義です。");
21          }
22          firebase.database().ref('my-key/').on('value', snapshot => {
23            if (snapshot) {
24             const bookList = snapshot.val();
25             let  booksFavs = [];
26            //null判定
27            const fovdata = snapshot.val();
28            if (fovdata === null) {
29              console.log('snapshot.valはnullです');
30            }
31            // snapshotで最新状態を取得する
32            console.log(snapshot.val());
33            // データオブジェクトを配列に変更する
34              Object.keys(bookList).forEach((val, key) => {
35                bookList[val].id = val;
36                booksFavs.push(bookList[val]);
37                 });
38            this.booksFavs = booksFavs;
39            }
40          });
41      });
42    },
43    addFavorite(setId,setTitle) {
44      //気になるボタンの本のIDとtitleを取得する
45      let setDatas = {
46        id    : setId,
47        title : setTitle
48      };
49      //IDとtitleをfirebaseに登録する
50      firebase
51        .database()
52        .ref(`my-key/${setId}`)
53        .set(setDatas);
54    },
55     //IDとtitleを削除する
56    removeFavorite(removeId) {
57      let removeDatas = {
58        id    : removeId,
59      };
60      console.log(removeDatas);
61       firebase
62        .database()
63        .ref(`my-key/${removeId}`)
64        .remove();
65    }
66  }
67});

行動規範の内容に同意します

回答1件

ベストアンサー

bookListがnullのときが問題なんですよね？
そのときconsole.log('snapshot.valはnullです');は実行されますか？
でも提示されているコードでは、nullやundefinedを判定しているのはいいけど、そのときconsole.logでログ出力するだけで、あとはスルーして処理を継続しちゃっていますよね。
それが問題なのでは？
つまりnullやundefinedのときに対応する処理が入っていないため、そのままエラーが引き起こされているということです。

投稿2021/06/07 15:20

itagagaki

総合スコア8402

tamaharu31

2021/06/07 15:28

ご回答ありがとうございます。現状、console.log('snapshot.valはnullです');自体が実行されていない状態です。

itagagaki

2021/06/07 16:31

console.log(bookList);してデバッグしてみましたか？

tamaharu31

2021/06/08 15:25 編集

申し訳ございません。確認したところ、infoの部分に「snapshot.valはnullです」の表記がありました。ご指摘頂いたように、console.log('snapshot.valはnullです')の部分をbooleanやreturn bookList='　'などに変更してみたのですがうまくいきません。アドバイスなどを頂けると助かります。宜しくお願いいたします

行動規範の内容に同意します