Displaying information from shops
There are a couple of improvements you can make in your componentDidMount.

First, you create an empty array of shops, then push to it in every iteration over the querySnapshot. When constructing an array by transforming another array (or array-like collection), the appropriate method to use is Array.prototype.map. You can get an array of documents from the snapshot by accessing its .docs property.

Second, rather than calling doc.data many times repetitively, you can make an array of properties and extract each of them from the document being iterated over, putting them into a new object with Object.fromEntries:

async componentDidMount() {
  const querySnapshot = await db.mShopsCollection().get();
  const properties = ['address1', 'address2', 'address3', 'name', 'prefecture', 'zip_code'];
  const shops = querySnapshot.docs.map((doc) =&gt; {
    const data = doc.data();
    return {
      id: doc.id,
      ...Object.fromEntries(properties.map(prop =&gt; data[prop]))
    };
  });
  this.setState({ shops });
}


Lodash's pick is another method that can be used to extract certain properties from an object into a new object.