Is this problem being caused by the router not being ready? router.query is undefined

Question

I am having a problem getting the router.query to pull back the params of the url.

I have tried several different ways of approaching this problem and think that i am using the right solution. However, I keep getting an undefined result.

Here is the query param highlighted in yellow...

/pages/artist/[artistId].js

import React, { useEffect, useState } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { getDoc, doc } from "firebase/firestore";
import { db } from "../api/auth/firebase/config";

import Head from "next/head";
import ArtistHeader from "../../components/ArtistHeader";
import UploadButton from "../../components/UploadButton";
import styles from "../../styles/artistPage.module.css";

export default function Artist() {
  const { data: session, status, loading } = useSession();
  const [artist, setArtist] = useState();
  const router = useRouter();
  const { artistId } = router.query;

  useEffect(() => {
    if (status === "unauthenticated") {
      router.push("/auth/signin");
    }
  }, [status, loading, router]);

  // useEffect to fetch artist page data
  useEffect(() => {
    const fetchArtist = async () => {
      const artistRef = doc(db, "users", `${artistId}`);
      const docSnap = await getDoc(artistRef);
      setArtist(docSnap);
    };
    fetchArtist();
  }, [setArtist, artist, artistId]);

  return (
    <section className={styles.wrapper}>
      <Head>
        <title>{artist.screenName}</title>
      </Head>
      <div className={styles.artistPage}>
        <ArtistHeader artist={artist} />
        <div className={styles.songContainer}>
          <UploadButton />
        </div>
      </div>
    </section>
  );
}

Is this problem being caused by the router not being ready and the page is trying to render before it is able to get the params?

Bit lost here and could use some pointers. Thanks in advance.

You are destructuring `artistId` from the `query` object, so it should be `const { artistId } = router.query` — ivanatias, Oct 10 '22 at 03:43

score 1 · Answer 1 · answered Oct 10 '22 at 03:52

1

It should be either,

const { artistId } = router.query;

or

const artistId = router.query.artistId;

answered Oct 10 '22 at 03:52

Dulaj Ariyaratne

998
1
6
13

score 0 · Accepted Answer · answered Oct 11 '22 at 11:53

The problem was that i would get undefined when getting the router.query due to the useEffect being actioned before the router was finished doing its operation. now my code looks like that and works...

import React, { useEffect, useState } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { getDoc, doc } from "firebase/firestore";
import { db } from "../api/auth/firebase/config";

import Head from "next/head";
import ArtistHeader from "../../components/ArtistHeader";
import UploadButton from "../../components/UploadButton";
import styles from "../../styles/artistPage.module.css";

export default function Artist() {
  const { data: session, status, loading } = useSession();
  const [artist, setArtist] = useState();
  const router = useRouter();

  const artistId = router.query.artistId;

  useEffect(() => {
    if (status === "unauthenticated") {
      router.push("/auth/signin");
    }
    const fetchArtist = async () => {
      if (!router.isReady) return;
      const artistRef = doc(db, "users", `${artistId}`);
      const docSnap = await getDoc(artistRef);
      setArtist(docSnap);
    };
    fetchArtist();
  }, [status, loading, router, artistId]);

  return (
    <p> it works </p>
}

Is this problem being caused by the router not being ready? router.query is undefined

2 Answers2