React + Firestore 複数のcollectionを呼ぼうとするとエラーになる

Question

前提

Firestore
React(関数コンポーネント)　※クラスコンポーネントのサンプルコードはNG

要件

Firestoreから複数のコレクションデータを１つのコンポーネントで読み込ませて表示したいのですが、エラーとなり、表示できません。

このような事案はネットで調べても出てこないのですが、技術的に複数のコレクションを１つのコンポーネントで展開させ表示させることは不可能なのでしょうか？

ここでは
shops collectionとshop_menus collectionを展開させ、
用意した外部キーを用いてコレクションの連結をおこないたいために必要があります。

// 省略

const [data, setData] = useState(null);

    useEffect(() => {
        // shops collection展開
        const docRef = db.collection('shops').doc(props.match.params.shopDocId);
        docRef.get().then(function(doc) {
            if (doc.exists) {
                setData(doc.data());
            } else {
                console.log('No such document!');
            }
        }).catch(function(error) {
            console.log(error);
        });
    }, [props.match.params.shopDocId]);

    if(!data) return null;

    // shop_menus collection展開（追加するとエラーになる）
    const [ list, loading, error ] = useCollectionData(
        db.collection('shop_menus')
        .orderBy('createdAt', 'desc'),
        { idField: 'docId' }
    );
    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error...</div>;

// 省略

エラー表示

index.js:1 ./src/components/Screens/ShopDetailScreen.js
  Line 30:38:  React Hook "useCollectionData" is called conditionally. React Hooks must be called in the exact same order in every component render  react-hooks/rules-of-hooks
  Line 30:38:  'useCollectionData' is not defined                                                                                                    no-undef

Search for the keywords to learn more about each error.

Answer 1

知り合いのアドバイスでif(!data) return null;の位置が問題だったようです。
これを最後に読み込ませたら無事、両方のcollectionのデータが取得できました。