錯誤：“輸入”過濾器需要非空數組

Question

我想創建將運行 react-firebase-hooks 庫鈎子的自定義鈎子： useCollection 。 我在我的項目中使用 redux 工具包作為 state 經理，redux 為我的自定義掛鈎提供游戲數據。 我需要從商店獲取連接的玩家 ID： game.players: string[] 。 但問題是有時游戲仍然不會被提取，有時它可能是null並且新創建的游戲沒有任何連接的玩家。

我創建了自己的實現：

export const useGamePlayers = () => {
    const {game} = useTypedSelector(state => state.game);

    return useCollection(
        query(collection(db, 'players'), where(documentId(), 'in', game?.players))
    )
};

但是當我使用這個鈎子時，我看到了這個錯誤： Uncaught FirebaseError: Invalid Query。 “in”過濾器需要一個非空數組。 這是因為新游戲有 0 個連接的玩家。

所以問題是 -如何根據數組長度有條件地執行 hook？

Answer 1

解決方案非常簡單。 我沒有得到的是，當沒有玩家連接或玩家數組不存在時，我可以傳遞 null 而不是查詢集合。

export const useGamePlayers = () => {
    const {game} = useTypedSelector(state => state.game);

    return useCollection(
        game?.players.length
            ? query(collection(db, 'players'), where(documentId(), 'in', game.players)) 
            : null
    )
};