Next.js Discord

Discord Forum

how to solve the error below

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
Error: Route "/topics/[topicId]/questions/new" used params.topicId. params should be awaited before using its properties.

2 Replies

Asiatic LionOP
import { createClient } from '@/lib/supabase/server'
import { redirect } from 'next/navigation'
import { QuestionForm } from '@/components/questions/question-form'

type PageProps = {
  params: {
    topicId: string
  }
}

export default async function NewQuestionPage({ params }: PageProps) {
  const topicId = params.topicId;

  async function createQuestion(formData: FormData) {
    'use server'

    const supabase = createClient()

    const { data: { user }, error: authError } = await supabase.auth.getUser()
    if (authError || !user) {
      redirect('/login')
    }

    const questionText = formData.get('questionText') as string
    const difficultyLevel = formData.get('difficultyLevel') as string
    const answerCount = parseInt(formData.get('answerCount') as string, 10)


    const answers = []
    for (let i = 0; i < answerCount; i++) {
      answers.push({
        id: formData.get(`answerId_${i}`),
        answer_text: formData.get(`answerText_${i}`),
        is_correct: formData.get(`isCorrect_${i}`) === 'on',
        explanation: formData.get(`explanation_${i}`),
      })
    }

    try {
      const { data, error } = await supabase
        .from('questions')
        .insert({
          topic_id: topicId,
          question_text: questionText,
          difficulty_level: difficultyLevel,
          created_by: user.id,
        })
        .select('id')
        .single()

      if (error) {
        console.error('Error creating question:', error)
        return { error: error.message, success: false }
      }

      return { success: true, questionId: data.id }
    } catch (err: any) {
      console.error('Error creating question:', err)
      return { error: err.message || 'An unexpected error occurred', success: false }
    }
  }

  return (
    <QuestionForm
      action={createQuestion}
      topicId={topicId}
      editMode={false}
    />
  )
}
on next 15 params are async, and must be awaited

export default async function 
NewQuestionPage({ params }: { params: Promise<{ topicId: string }> }) {

  const {topicId} = await params;
...