how to handle useRouter()s async problem in nextJS

Question

When I click the Link in PublicMyTeam.js it passes query(=el.group_name) using router.

// PublicMyTeam.js
<Link href={`/public/${el.group_name}`}>
    <a><h1 className={styles.team_name}>{el.group_name}</h1></a>
</Link>

But because of async problem of useRouter(), an error occured in useEffect() in [group].js.

It can't read dbService.collection(group).

// [group].js
const router = useRouter()
const { group } = router.query

async function getGroupPlayers() {
  const querySnapshot = await dbService.collection(group).doc('group_data').collection('players').get()
  querySnapshot.forEach(doc => {
    const singlePlayerObject = {
      name: doc.data().name,
      photoURL: doc.data().photoURL,
      joined_date: doc.data().joined_date,
      rating: doc.data().rating,
      game_all: doc.data().game_all,
      game_win: doc.data().game_win,
      game_lose: doc.data().game_lose,
      status: doc.data().status,
      introduce: doc.data().introduce
    }
    setGroupPlayers(groupPlayers => [...groupPlayers, singlePlayerObject])
  })
  groupPlayers.sort((a, b) => b.rating - a.rating)
}

useEffect(() => {
  getGroupPlayers()
}, [])

What should I do?

Answer 1

Try adding router to the useEffect's dependencies array, and check for router.query.group before calling getGroupPlayers().

useEffect(() => {
    if (router.query.group) {
        getGroupPlayers()
    }
}, [router])