我通过$user-〉profile-〉profile_pic向组件的视图传递数据，当我在该视图中使用dd时，它完美地显示了所需的值。但当我在某些条件下或在标记中使用它来打印该值时，它说尝试读取属性"profile_pic" on null。尽管如此，这并不是因为我可以删除并转储它，并且可以看到该值
组件的用途：

<x-details 
     :user="$user->id"
      class="w-96 mt-10 py-4" 
      letter="{{ $user->username[0] }}" 
       editable="{{ Auth::user()->username == $user->username }}"
       profile_pic="{{ $user->profile->profile_pic }}"
 />

该组件

<?php

namespace App\View\Components;

use Illuminate\View\Component;
use App\Models\User;
use Illuminate\Support\Facades\DB;

class details extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public $user;
    public function __construct($user = 1)
    {
        $this->user = $user;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        $user = User::with(['profile'])->firstWhere("id", $this->user);
        $pic = $user->profile->profile_pic;
        return view('components.details', compact("pic"));
    }
}

组件的视图

<div>
    
    @props([
        "letter" => "A", 
        "editable" => 0,
        "profile_pic" => 0
    ])
    {{-- @php
        $src = "";
        if($profile_pic) {
            $src = "/uploads/$profile_pic";
        } else {
            $src = url("fonts/icons/avatars/$letter.svg");
        }
    @endphp --}}
    <div>
        {{-- @dd($pic) --}}
        {{ $pic }}
        {{-- @if(!$editable)
            <a href="#" {{ $attributes->merge(["class" => "avatar"]) }}><img class="rounded-full avatar" src="{{ $src }}" alt="avatar"></a>
        @else 
            <form id="fileUpload">
                <a href="#" onclick="document.getElementById('upload_pic').click()" {{ $attributes->merge(["class" => "avatar"]) }} ><img id="output" style="width: 144px;" class="rounded-full avatar" src="{{ $src }}" alt="avatar"></a>
                <input class="hidden" type="file" name="upload_pic" id="upload_pic">
            </form>
        @endif --}}
    </div>
</div>