你已经很接近了，在你的实现中有两个错误，第一个错误是你使用了getElementByClassName，而实际上你使用的是一个ID作为你的选择器，因此你应该使用querySelector。
第二个问题是你过度使用了你的选择器，你已经选择了你的父div并把它放在一个var中，这样你就可以再次引用它了。
下面是我的实现：

var productTemplate = document.querySelector("#product-recommender-recipe")
if (!productTemplate.querySelector('.slick-initialized')) {
        productTemplate.style.display = none;
}

#product-recommender-recipe {
  background: red;
  width: 50px;
  height: 50px;
}

<div id="product-recommender-recipe">
<div class="slick-initialized"></div>
</div>

getElementsByClassName需要一个类名，而不是选择器。如果要使用选择器，请使用querySelector或querySelectorAll。如果DOM中不存在该元素，则querySelector返回null。

const element = document.querySelector(".slick-initialized");

if(element === null) {
    document.querySelector("#product-recommender-recipe").style.display = "none";
}

您可以隐藏#product-recommender-recipe，并检查.slick-initialized exists是否比只使用CSS显示。
它工作得很好。

#product-recommender-recipe {
  padding: 50px;
  background-color: red;
  display: none;
}

#product-recommender-recipe:has(.slick-initialized) {
  display: block;
}

<!-- hidden if slick-initialized not exist -->
<div id="product-recommender-recipe">
<!-- <div class="slick-initialized"></div> -->
</div>
<br/>
<!-- visible if slick-initialized exist -->
<div id="product-recommender-recipe">
  <div class="slick-initialized"></div>
</div>