取得処理が非同期なので、データ取得してsetStateする前に、componentDidMountが終了して
Renderされているんじゃないでしょうか。
Promiseかasync,awaitで取得処理が終わるのを待てば反映されるかと思います。
【追記】
コメントではソース部分が書きにくい為、回答に編集で書きます。
仰る通りcomponentWillMountは非推奨になってますので
hooksを使用した版を下記に載せますので参考に
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>
);
};