I have set up a Blockgrid view for navigation that has the ability to add multiple navigation items - each of these nav items can also have multiple children (which are currently setup as a Blocklist editor)

I can't get the children to render - I keep getting errors with this:

    var rowChild = (NavLinkItem)item.Content;

    if(rowChild.ChildItems == null || !rowChild.ChildItems.Any()) return;

    foreach(var item in rowChild.ChildItems)
    {
                 var rowChildItem = (EventDate)item.Content;
                <!--Should display child items here but keep getting breaking error here-->
     }

I'm actually a designer / front-end guy, so not so very knowledgeable with C#.

What am I doing wrong? Any help for a noob would be much appreciated :)

Here is my full code:

@using Umbraco.Extensions
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem>
@{
    var row = (NavigationRow)Model.Content;
    var settings = (NavigationComponentSettings)Model.Settings;
    if(settings?.Hide ?? false) { return; }
    if(row.NavigationItems == null || !row.NavigationItems.Any()) return;
    var navId = "nav-" + row.Key;
}

<div class="@(settings?.ContainerSize ?? "container") @settings.ItemClass">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-secondary">
  <div class="container">

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        @{
            foreach(var item in row.NavigationItems)
            {
                var rowItem = (NavLinkItem)item.Content;
                var rowSettings = (NavigationItemSettings)item.Settings;
                var childlinks = @rowItem.ChildLinks;
                var collapseId = navId + "-navitem";

                var rowChild = (NavLinkItem)item.Content;

               if(rowChild.ChildItems == null || !rowChild.ChildItems.Any()) return;

               foreach(var item in rowChild.ChildItems)
              {
                 var rowChildItem = (EventDate)item.Content;
                <!--Should display child items here but keep getting breaking error here-->
              }

                if (childlinks.Any())
                {
                    if(rowSettings?.MegaMenuToggle ?? false)
                     {

                        <li class="nav-item dropdown has-megamenu">
                            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> @rowItem.Link.Name</a>
                            <div class="dropdown-menu megamenu" role="menu">
                              <div class="container">
                                    <div class="row g-3">
                                        <div class="col-lg-3 col-6">
                                            <h6 class="title">@rowItem.Link.Name</h6>
                                            <ul class="list-unstyled">
                                                 @foreach (var link in childlinks)
                                                        {
                                                            <li><a class="dropdown-item" href="@link.Url" target="@link.Target">@link.Name</a></li>
                                                        }
                                            </ul>
                                        </div>
                                    </div>
                               </div>
                            </div> 
                        </li>
                    }

                    else {
                        <li class="nav-item dropdown">
                            <a href="#" class="nav-link dropdown-toggle"role="button" data-bs-toggle="dropdown" aria-expanded="false" id="@collapseId">
                                 @rowItem.Link.Name
                            </a>
                             <ul class="dropdown-menu" aria-labelledby="@collapseId">
                                @foreach (var link in childlinks)
                                {
                                    <li><a class="dropdown-item" href="@link.Url" target="@link.Target">@link.Name</a></li>
                                }
                            </ul>
                        </li>
                    }
                }
                else {
                    <li class="nav-item">
                        <a href="@rowItem.Link.Url" class="nav-link" target="@rowItem.Link.Target" id="@collapseId" title="@rowItem.Link.Name">
                              @rowItem.Link.Name
                          </a>
                    </li>
                }

               // index++;

             }
         }

      </ul>

      <button class="btn btn-primary me-2" type="button">Main button</button>

      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-primary" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
</div>

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(){
        /////// Prevent closing from click inside dropdown
        document.querySelectorAll('.dropdown-menu').forEach(function(element){
            element.addEventListener('click', function (e) {
                e.stopPropagation();
            });
        })
    }); 
</script>