Cannot read property 'map' of undefinedのエラー解決

Question

前提・実現したいこと

React、Typescriptで
FireBaseのデータをレンダリングしようとしているのですが、
map処理のところでエラーが出てしまいました。

初歩的な質問で恐縮ですが、
アドバイスいただけると幸いです。

発生している問題・エラーメッセージ

TypeError: Cannot read property 'map' of undefined

該当のソースコード

import React, { useState, useEffect } from 'react';
import './App.css';
import { db } from './firebase';

const App: React.FC = () => {
  const [ posts, setPosts ] = useState([{ id: "", artist: "", name: "", url: ""}])
  useEffect(() => {
    const unSub = db.collection("posts").doc("content").collection("song").doc("song1").onSnapshot((snapshot: any) =>{
      setPosts(
        snapshot.docs.map((doc: any)=> ({id: doc.id, artist: doc.data().artist, name: doc.data().name, url: doc.data().url}))
      );
    });
    return () => unSub();
  }, [])

試したこと

以下のコードでは無事にレンダリングできたので、
このコードをベースにいじってみました。

  const App: React.FC = () => {
    const [ posts, setPosts ] = useState([{ id: "", content: ""}])
    useEffect(() => {
      const unSub = db.collection("posts").onSnapshot((snapshot) =>{
        setPosts(
          snapshot.docs.map((doc)=> ({id: doc.id, content: doc.data().content}))
        );
      });
      return () => unSub();
    }, [])

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[hoshi-takanori]

collection ど document で snapshot の型が異なるからでは。

[exad916]

なるほど・・・！ありがとうございます！確認してみます！

[FKM]

firebaseのcollectionとdocの役割についてもっと理解すべきなのでは。ただ、コピペ元のソースは動いてるといわれても、それはあくまでその条件に合致しているからに過ぎません。

[exad916]

ありがとうございます！ドキュメントを改めて読みます！

Answer 1

mapというプロパティがない、といってるので、そのmapがくっついてるやつになにが入ってるか調べてみては

Comments

[exad916]

ありがとうございます！確認してみます！