取得処理が非同期なので、データ取得してsetStateする前に、componentDidMountが終了して
Renderされているんじゃないでしょうか。
Promiseかasync,awaitで取得処理が終わるのを待てば反映されるかと思います。

【追記】
コメントではソース部分が書きにくい為、回答に編集で書きます。
仰る通りcomponentWillMountは非推奨になってますので
hooksを使用した版を下記に載せますので参考に

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->


const db = firebase.firestore();

    export default () => {
      const [list, setList] = useState([]);

      useEffect(() => {
        const fetchData = async () => {
          const ref = db.collection("list");
          const snapShot = await ref.get();
          const list = snapShot.docs.map((doc) => {
            const item = doc.data();
            item.id = doc.id;
            return item;
          });
          setList(list);
        };
        fetchData();
      }, []);

      return (
        <div>
          {list.map((item) => (
            <div key={item.id}>{item.id}</div>
          ))}
        </div>
      );
    };

<!-- end snippet -->