Livewire 3.0传递模型对象触发404，转数组正常——原因何在？

在使用Livewire 3.0开发嵌套组件时（单组件场景未测试），遇到异常：将Model对象传递给子组件视图数据时，点击子组件方法会触发404错误。需明确：

• 错误触发原因是什么？
• Livewire是否不支持组件间的对象传递？
• 是否遗漏了文档中关于需使用数组而非对象传递数据的说明？

正常工作的代码示例 #

TestComponent.php #

<?php

namespace App\Livewire;

use App\Models\ItemsInventory;
use Livewire\Attributes\Layout;
use Livewire\Component;

class TestComponent extends Component
{
    #[Layout('layouts.public')]
    public function render()
    {
        return view('livewire.test-component', [
            'items' => ItemsInventory::select([
                'id as inventory_id',
                'name as inventory_name',
            ])
                ->limit(4)
                ->get()->toArray()
        ])->layoutData(['title' => 'Testing...']);
    }
}

test-component.blade.php #

<div class="container mx-auto mt-8">
    <div class="flex gap-8">
        @foreach($items as $item)
            <livewire:test-list-component :item="$item" :key="$item['inventory_id']"/>
        @endforeach
    </div>
</div>

TestListComponent.php #

<?php

namespace App\Livewire;

use App\Helpers\ItemHelper;
use Livewire\Component;

class TestListComponent extends Component
{
    public $item;

    public function mount($item)
    {
        $this->item = $item;
    }

    public function doSomething()
    {
        dump(ItemHelper::translate($this->item['inventory_name']));
    }

    public function render()
    {
        return view('livewire.test-list-component');
    }
}

test-list-component.blade.php #

<div>
    <flux:button wire:click="doSomething" variant="primary">get name</flux:button>
</div>

触发错误的修改内容 #

修改TestComponent.php #

移除get()->toArray()，直接传递Model集合：

return view('livewire.test-component', [
    'items' => ItemsInventory::select([
        'id as inventory_id',
        'name as inventory_name',
    ])
        ->limit(4)
        ->get()
])->layoutData(['title' => 'Testing...']);

修改TestListComponent.php #

调整doSomething方法，通过对象属性访问字段：

public function doSomething()
{
    dump(ItemHelper::translate($this->item->inventory_name));
}

修改test-component.blade.php #

调整循环中key的获取方式，通过对象属性访问：

<div class="container mx-auto mt-8">
    <div class="flex gap-8">
        @foreach($items as $item)
            <livewire:test-list-component :item="$item" :key="$item->inventory_id"/>
        @endforeach
    </div>
</div>

此时点击"get name"按钮调用doSomething方法，会返回404错误。

问题原因与解决方案 #

核心原因 #

Livewire依赖序列化/反序列化机制维护组件状态，当把完整Model实例赋值给子组件public $item属性时：

1. Model实例包含大量框架内部属性（如查询构建器、关联关系、隐藏字段等），无法被Livewire正确序列化。
2. 触发组件方法时，Livewire需要反序列化保存的组件状态，反序列化失败会导致组件实例无法重建，最终返回404错误（请求无法匹配有效组件实例）。

正确解决方案 #

1. 传递Model ID而非完整对象
   父组件传递Model的ID，子组件在mount方法中重新查询加载：

   // 父组件视图传递ID
   <livewire:test-list-component :item-id="$item->inventory_id" :key="$item->inventory_id"/>
   
   // 子组件代码
   class TestListComponent extends Component
   {
       public $item;
   
       public function mount($itemId)
       {
           $this->item = ItemsInventory::select('id as inventory_id', 'name as inventory_name')
               ->findOrFail($itemId);
       }
   
       // ...其他方法
   }
   

2. 使用Livewire的#[Modelable]属性
   Livewire 3支持#[Modelable]属性，自动处理Model实例的序列化/反序列化：

   use Livewire\Attributes\Modelable;
   
   class TestListComponent extends Component
   {
       #[Modelable]
       public ItemsInventory $item;
   
       public function doSomething()
       {
           dump(ItemHelper::translate($this->item->inventory_name));
       }
   }
   

3. 传递数组或DTO
   若仅需Model部分字段，继续用toArray()转换为数组传递，或自定义DTO类封装数据，确保序列化正常。

内容的提问来源于stack exchange，提问作者Michael Kocurek