Livewire从路由获取ID报错：无法解析$id依赖的解决求助

问题详情 #

使用Livewire时，尝试从路由获取ID并通过组件mount方法加载对应数据库数据，触发以下错误：

Unable to resolve dependency [Parameter #0 [ <required> $id ]] in class App\Livewire\StartExams

手动将代码中的$this->id替换为具体数值（如1）时功能正常，但通过路由参数传递$id就报错。相关代码如下：

按钮代码 #

<a class="py-2 text-sm my-0 mx-4 flex items-center transition-colors" title="{{ __('Quiz') }}"
    href="{{ route('start-quiz', $getExamsOnLecture->exams->id) }}"
    wire:click="mount({{ $getExamsOnLecture->exams->id }})">
    <i class="mr-2 fa-solid fa-question"></i>
    <span class="ml-1 duration-300 opacity-100 pointer-events-none">
        {{ $getExamsOnLecture->exams->name }}
    </span>
</a>

路由代码 #

use App\Livewire\StartExams;
Route::get('/exams/{any}/start', StartExams::class)->name('start-quiz');

Livewire组件代码 #

namespace App\Livewire;
use App\Models\Questions;
use App\Models\QuestionsOption;
use Livewire\Component;

class StartExams extends Component
{
    public $id;
    public $questions = [];
    public $questionIndex = 0;
    public $question;
    public $answer;
    public $questionOption;

    public bool $finished = false;

    public function mount($id)
    {
        $this->id = $id;
        $this->questions = Questions::where('exam_id', $this->id)->get();

        foreach ($this->questions as $key => $questionOption) {
            $this->questionOption[$key]['options'] = QuestionsOption::where('question_id',  $questionOption->id)->get();
        }

    }

    public function resetRadioOptions()
    {
        $this->answer = null;
    }

    public function submitQuiz()
    {
        //otw making save to database ///

        $this->questionIndex++;
        if ($this->questionIndex >= count($this->questions)) {
            $this->finished = true;
        } else {
            $this->question = $this->questions[$this->questionIndex];
            $this->resetRadioOptions();
        }
    }
    public function render()
    {
        return view('livewire.start-exams', [
            'id' => $this->id,
        ])->layout('layouts.auth');
    }
}

分步解决方法 #

1. 统一路由参数与组件参数名称 #

Livewire依赖路由参数名称自动注入到mount方法，当前路由使用{any}，但组件接收的是$id，参数名不匹配导致注入失败。修改路由参数为{id}：

use App\Livewire\StartExams;
Route::get('/exams/{id}/start', StartExams::class)->name('start-quiz');

2. 移除手动调用mount的代码 #

mount方法是Livewire组件初始化时自动执行的，不需要通过wire:click手动触发。点击链接会跳转至目标路由，组件会在新页面自动初始化并接收路由参数。修改后的按钮代码：

<a class="py-2 text-sm my-0 mx-4 flex items-center transition-colors" title="{{ __('Quiz') }}"
    href="{{ route('start-quiz', $getExamsOnLecture->exams->id) }}">
    <i class="mr-2 fa-solid fa-question"></i>
    <span class="ml-1 duration-300 opacity-100 pointer-events-none">
        {{ $getExamsOnLecture->exams->name }}
    </span>
</a>

3. 优化数据查询（可选但推荐） #

原代码中循环查询每个问题的选项会导致N+1性能问题，建议通过模型关联预加载数据：

• 首先在Questions模型中定义关联：

namespace App\Models;
use Illuminate\Database\Eloquent\Model;

class Questions extends Model
{
    // ... 其他代码

    public function options()
    {
        return $this->hasMany(QuestionsOption::class, 'question_id');
    }
}

• 然后修改组件mount方法使用预加载：

public function mount($id)
{
    $this->id = $id;
    // 预加载选项，避免循环查询
    $this->questions = Questions::with('options')
        ->where('exam_id', $this->id)
        ->get();
}

之后在视图中可以直接通过$question->options访问对应选项，无需使用$questionOption数组。

4. 验证组件参数传递（可选） #

组件渲染方法中已经将$id传递到视图，若视图中直接使用组件的$id属性（如{{ $id }}），可以省略渲染方法中的参数传递，简化代码：

public function render()
{
    return view('livewire.start-exams')->layout('layouts.auth');
}

验证修复效果 #

完成上述修改后，点击按钮跳转到目标路由，Livewire组件会自动接收路由中的id参数，调用mount方法加载对应数据，不会再出现依赖注入错误。

内容的提问来源于stack exchange，提问作者umaruz xelina